fix: 🐛 Added support for cancel record icon and cancel voice recordin…

…g. (#162)

- Added configuration class for cancel voice record message.

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.
 * **Feat**: [93](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/93) Added support
   that provide date pattern to change chat separation.
 * **Fix**: [142](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/142) Added

README.md

@@ -601,7 +601,7 @@ ChatView(
 ```
 
 
-25. Added `chatSeparatorDatePattern` in `DefaultGroupSeparatorConfiguration` to separate chats with provided pattern.
+26. Added `chatSeparatorDatePattern` in `DefaultGroupSeparatorConfiguration` to separate chats with provided pattern.
 
 ```dart
 ChatView(
@@ -617,6 +617,29 @@ ChatView(
 )
 ```
 
+27. Field `cancelRecordConfiguration` to provide an configuration to cancel voice record message.
+
+```dart
+ChatView(
+   ...
+      sendMessageConfig: SendMessageConfiguration(
+        ...
+           cancelRecordConfiguration: CancelRecordConfiguration(
+            icon: const Icon(
+              Icons.cancel_outlined,
+            ),
+            onCancel: () {
+              debugPrint('Voice recording cancelled');
+            },
+            iconColor: Colors.black,
+           ),
+        ...
+      ),
+   ...
+
+)
+```
+
 
 ## How to use
 

lib/src/models/send_message_configuration.dart

@@ -19,12 +19,15 @@
  * 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:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:image_picker/image_picker.dart';
 
+import '../values/enumaration.dart';
+import '../values/typedefs.dart';
+
 class SendMessageConfiguration {
   /// Used to give background color to text field.
   final Color? textFieldBackgroundColor;
@@ -71,6 +74,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 +93,7 @@ class SendMessageConfiguration {
     this.enableGalleryImagePicker = true,
     this.voiceRecordingConfiguration,
     this.micIconColor,
+    this.cancelRecordConfiguration,
   });
 }
 
@@ -269,3 +276,21 @@ class VoiceRecordingConfiguration {
   /// The audio output format to be used for recorded audio files on Android.
   final AndroidOutputFormat? androidOutputFormat;
 }
+
+class CancelRecordConfiguration {
+  /// Configuration for cancel voice recording
+  const CancelRecordConfiguration({
+    this.icon,
+    this.iconColor,
+    this.onCancel,
+  });
+
+  /// An icon for cancelling voice recording.
+  final Widget? icon;
+
+  /// Cancel record icon color
+  final Color? iconColor;
+
+  /// Provides callback on voice record cancel
+  final VoidCallBack? onCancel;
+}

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: widget.sendMessageConfig?.textFieldConfig?.borderRadius ??
@@ -145,11 +148,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.75 : 0.65),
+                      50),
                   recorderController: controller!,
                   margin: voiceRecordingConfig?.margin,
                   padding: voiceRecordingConfig?.padding ??
-                      const EdgeInsets.symmetric(horizontal: 8),
+                      EdgeInsets.symmetric(
+                        horizontal: cancelRecordConfiguration == null ? 8 : 5,
+                      ),
                   decoration: voiceRecordingConfig?.decoration ??
                       BoxDecoration(
                         color: voiceRecordingConfig?.backgroundColor,
@@ -274,7 +282,19 @@ class _ChatUITextFieldState extends State<ChatUITextField> {
                                   color:
                                       voiceRecordingConfig?.recorderIconColor,
                                 ),
-                          )
+                          ),
+                        if (isRecordingValue &&
+                            cancelRecordConfiguration != null)
+                          IconButton(
+                            onPressed: () {
+                              cancelRecordConfiguration?.onCancel?.call();
+                              _cancelRecording();
+                            },
+                            icon: cancelRecordConfiguration?.icon ??
+                                const Icon(Icons.cancel_outlined),
+                            color: cancelRecordConfiguration?.iconColor ??
+                                voiceRecordingConfig?.recorderIconColor,
+                          ),
                       ],
                     );
                   }
@@ -287,6 +307,27 @@ class _ChatUITextFieldState extends State<ChatUITextField> {
     );
   }
 
+  FutureOr<void> _cancelRecording() async {
+    assert(
+      defaultTargetPlatform == TargetPlatform.iOS ||
+          defaultTargetPlatform == TargetPlatform.android,
+      "Voice messages are only supported with android and ios platform",
+    );
+    if (!isRecording.value) return;
+    final path = await controller?.stop();
+    if (path == null) {
+      isRecording.value = false;
+      return;
+    }
+    final file = File(path);
+
+    if (await file.exists()) {
+      await file.delete();
+    }
+
+    isRecording.value = false;
+  }
+
   Future<void> _recordOrStop() async {
     assert(
       defaultTargetPlatform == TargetPlatform.iOS ||