fix: 🐛 Added support for cancel record icon and cancel voice recording.

- Added configuration class for cancel voice record message.
SimformSolutionsPvtLtd · May 20, 2024 · 58caaf9 · 58caaf9
1 parent aeb843f
commit 58caaf9
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,7 @@
 ## [1.3.2] (Unreleased)
 
+* **Fix**: [137](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/137) Added
+  support for cancel voice recording and field to provide cancel record icon.
 * **Fix**: [130](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/130) Added
   report button for receiver message and update onMoreTap, onReportTap callback.
 * **Fix**: [126](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/126) Added

diff --git a/README.md b/README.md
@@ -513,6 +513,29 @@ ChatView(
 ```
 
 
+22. Field `cancelRecordConfiguration` to provide an configuration to cancel voice record message.
+
+```dart
+ChatView(
+   ...
+      sendMessageConfig: SendMessageConfiguration(
+        ...
+           cancelRecordConfiguration: CancelRecordConfiguration(
+            cancelRecordIcon: const Icon(
+              Icons.cancel_outlined,
+            ),
+            onCancelVoiceRecord: () {
+              debugPrint('Voice recording cancelled');
+            },
+            cancelRecordIconColor: Colors.black,
+           ),
+        ...
+      ),
+   ...
+
+)
+```
+
 
 ## How to use
 

diff --git a/lib/src/models/send_message_configuration.dart b/lib/src/models/send_message_configuration.dart
@@ -19,8 +19,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import 'package:audio_waveforms/audio_waveforms.dart';
-import 'package:chatview/src/values/enumaration.dart';
+import 'package:chatview/chatview.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:image_picker/image_picker.dart';
@@ -71,6 +70,9 @@ class SendMessageConfiguration {
   /// Styling configuration for recorder widget.
   final VoiceRecordingConfiguration? voiceRecordingConfiguration;
 
+  /// Configuration for cancel voice recording
+  final CancelRecordConfiguration? cancelRecordConfiguration;
+
   const SendMessageConfiguration({
     this.textFieldConfig,
     this.textFieldBackgroundColor,
@@ -87,6 +89,7 @@ class SendMessageConfiguration {
     this.enableGalleryImagePicker = true,
     this.voiceRecordingConfiguration,
     this.micIconColor,
+    this.cancelRecordConfiguration,
   });
 }
 
@@ -238,3 +241,21 @@ class VoiceRecordingConfiguration {
   /// Applies color to mic and stop icon.
   final Color? recorderIconColor;
 }
+
+class CancelRecordConfiguration {
+  /// Configuration for cancel voice recording
+  const CancelRecordConfiguration({
+    this.cancelRecordIcon,
+    this.cancelRecordIconColor,
+    this.onCancelVoiceRecord,
+  });
+
+  /// An icon for cancelling voice recording.
+  final Widget? cancelRecordIcon;
+
+  /// Cancel record icon color
+  final Color? cancelRecordIconColor;
+
+  /// Provides callback on voice record cancel
+  final VoidCallBack? onCancelVoiceRecord;
+}
diff --git a/lib/src/widgets/chatui_textfield.dart b/lib/src/widgets/chatui_textfield.dart
@@ -20,7 +20,7 @@
  * SOFTWARE.
  */
 import 'dart:async';
-import 'dart:io' show Platform;
+import 'dart:io' show File, Platform;
 
 import 'package:audio_waveforms/audio_waveforms.dart';
 import 'package:chatview/src/utils/constants/constants.dart';
@@ -85,6 +85,9 @@ class _ChatUITextFieldState extends State<ChatUITextField> {
   TextFieldConfiguration? get textFieldConfig =>
       sendMessageConfig?.textFieldConfig;
 
+  CancelRecordConfiguration? get cancelRecordConfiguration =>
+      sendMessageConfig?.cancelRecordConfiguration;
+
   OutlineInputBorder get _outLineBorder => OutlineInputBorder(
         borderSide: const BorderSide(color: Colors.transparent),
         borderRadius: textFieldConfig?.borderRadius ??
@@ -144,11 +147,16 @@ class _ChatUITextFieldState extends State<ChatUITextField> {
             children: [
               if (isRecordingValue && controller != null && !kIsWeb)
                 AudioWaveforms(
-                  size: Size(MediaQuery.of(context).size.width * 0.75, 50),
+                  size: Size(
+                      MediaQuery.of(context).size.width *
+                          (cancelRecordConfiguration != null ? 0.65 : 0.75),
+                      50),
                   recorderController: controller!,
                   margin: voiceRecordingConfig?.margin,
                   padding: voiceRecordingConfig?.padding ??
-                      const EdgeInsets.symmetric(horizontal: 8),
+                      EdgeInsets.symmetric(
+                        horizontal: cancelRecordConfiguration != null ? 5 : 8,
+                      ),
                   decoration: voiceRecordingConfig?.decoration ??
                       BoxDecoration(
                         color: voiceRecordingConfig?.backgroundColor,
@@ -266,7 +274,21 @@ class _ChatUITextFieldState extends State<ChatUITextField> {
                                     : voiceRecordingConfig?.stopIcon) ??
                                 Icon(isRecordingValue ? Icons.stop : Icons.mic),
                             color: voiceRecordingConfig?.recorderIconColor,
-                          )
+                          ),
+                        if (isRecordingValue &&
+                            cancelRecordConfiguration != null)
+                          IconButton(
+                            onPressed: () {
+                              cancelRecordConfiguration?.onCancelVoiceRecord
+                                  ?.call();
+                              _cancelRecording();
+                            },
+                            icon: cancelRecordConfiguration?.cancelRecordIcon ??
+                                const Icon(Icons.cancel_outlined),
+                            color: cancelRecordConfiguration
+                                    ?.cancelRecordIconColor ??
+                                voiceRecordingConfig?.recorderIconColor,
+                          ),
                       ],
                     );
                   }
@@ -279,6 +301,24 @@ class _ChatUITextFieldState extends State<ChatUITextField> {
     );
   }
 
+  Future<void> _cancelRecording() async {
+    assert(
+      defaultTargetPlatform == TargetPlatform.iOS ||
+          defaultTargetPlatform == TargetPlatform.android,
+      "Voice messages are only supported with android and ios platform",
+    );
+    if (isRecording.value) {
+      final path = await controller?.stop();
+      final file = File(path ?? '');
+
+      if (await file.exists()) {
+        await file.delete();
+      }
+
+      isRecording.value = false;
+    }
+  }
+
   Future<void> _recordOrStop() async {
     assert(
       defaultTargetPlatform == TargetPlatform.iOS ||