diff --git a/CHANGELOG.md b/CHANGELOG.md index a602986d..9f72eb47 100644 --- 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. * **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 diff --git a/README.md b/README.md index 7fb06f99..5e7880b6 100644 --- a/README.md +++ b/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 diff --git a/lib/src/models/send_message_configuration.dart b/lib/src/models/send_message_configuration.dart index f852d808..c0a1dc17 100644 --- a/lib/src/models/send_message_configuration.dart +++ b/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; +} diff --git a/lib/src/widgets/chatui_textfield.dart b/lib/src/widgets/chatui_textfield.dart index 55c51e67..0f20ca91 100644 --- 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 { 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 { 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 { 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 { ); } + FutureOr _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 _recordOrStop() async { assert( defaultTargetPlatform == TargetPlatform.iOS ||