From 761c6c3900f6c6e4b5e81ba539b055ba0ba54822 Mon Sep 17 00:00:00 2001 From: "japan.shah" Date: Fri, 30 Jan 2026 13:31:19 +0530 Subject: [PATCH] fix: :bug: ensure images are properly added to preview when sending messages with text --- CHANGELOG.md | 3 +++ doc/documentation.md | 13 +++++++++- example/lib/main.dart | 25 ++++++++++-------- lib/src/widgets/chat_view.dart | 12 +++++++++ lib/src/widgets/send_message_widget.dart | 32 ++++++++++++------------ 5 files changed, 58 insertions(+), 27 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2e22beb2..99f573ef 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,8 @@ ## [Unreleased] +* **Fix**: [430](https://github.com/SimformSolutionsPvtLtd/chatview/pull/430) Added + ChatView.handleImageSelection to use shouldSendImageWithText + parameter with custom trailing actions. * **Fix**: [423](https://github.com/SimformSolutionsPvtLtd/chatview/pull/423) Rendering issue in attached image preview when sending message on web. * **Feat**: [420](https://github.com/SimformSolutionsPvtLtd/chatview/pull/420) Added support for diff --git a/doc/documentation.md b/doc/documentation.md index 29f73003..6c19f3a9 100644 --- a/doc/documentation.md +++ b/doc/documentation.md @@ -1152,11 +1152,22 @@ PackageStrings.setLocale('es'); ``` ## Send Image With Message -You can send images along with your messages by enabling the `shouldSendImageWithText` flag in `sendMessageConfig` all the other things will be handled by the package itself. Here's how to do it: +You can send images along with your messages by enabling the `shouldSendImageWithText` option in `sendMessageConfig` and use `ChatView.handleImageSelection` to display an image preview. Here's how to do it: ```dart sendMessageConfig: SendMessageConfiguration( shouldSendImageWithText: true, // Enable sending images with text + trailingActions: (context, controller) => [ + GalleryActionButton( + icon: Icon( + Icons.photo_rounded, + size: 30, + color: _theme.iconColor, + ), + onPressed: (path, replyMessage) { + ChatView.handleImageSelection(context, path!); + }, + ), ), ``` diff --git a/example/lib/main.dart b/example/lib/main.dart index 99fa02a3..c6720183 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -604,6 +604,7 @@ class _ExampleOneChatScreenState extends State { _customSeparatorWidget(separator), ), sendMessageConfig: SendMessageConfiguration( + shouldSendImageWithText: true, closeIconColor: _theme.iconColor, replyTitleColor: _theme.textColor, replyMessageColor: _theme.textColor, @@ -703,16 +704,20 @@ class _ExampleOneChatScreenState extends State { ), onPressed: (path, replyMessage) { if (path?.isEmpty ?? true) return; - _chatController.addMessage( - Message( - id: DateTime.now().millisecondsSinceEpoch.toString(), - message: path!, - createdAt: DateTime.now(), - messageType: MessageType.image, - sentBy: _chatController.currentUser.id, - replyMessage: replyMessage ?? const ReplyMessage(), - ), - ); + // Uncomment below to send image message directly + // _chatController.addMessage( + // Message( + // id: DateTime.now().millisecondsSinceEpoch.toString(), + // message: path!, + // createdAt: DateTime.now(), + // messageType: MessageType.image, + // sentBy: _chatController.currentUser.id, + // replyMessage: replyMessage ?? const ReplyMessage(), + // ), + // ); + + // Show Images Preview in Textfield + ChatView.handleImageSelection(context, path!); }, ), EmojiPickerActionButton( diff --git a/lib/src/widgets/chat_view.dart b/lib/src/widgets/chat_view.dart index be3c7a9e..bbe0a817 100644 --- a/lib/src/widgets/chat_view.dart +++ b/lib/src/widgets/chat_view.dart @@ -174,6 +174,18 @@ class ChatView extends StatefulWidget { return state?._sendMessageKey.currentState?.replyMessage; } + /// Allows external widgets to add an image to the SendMessageWidget's selection. + static void handleImageSelection(BuildContext context, String imagePath) { + final state = context.findAncestorStateOfType<_ChatViewState>(); + + assert( + state != null, + 'ChatViewState not found. Make sure to use correct context that contains the ChatViewState', + ); + + state?._sendMessageKey.currentState?.handleImageSelection(imagePath); + } + @override State createState() => _ChatViewState(); } diff --git a/lib/src/widgets/send_message_widget.dart b/lib/src/widgets/send_message_widget.dart index 7d1d0852..dc19b8fa 100644 --- a/lib/src/widgets/send_message_widget.dart +++ b/lib/src/widgets/send_message_widget.dart @@ -178,22 +178,7 @@ class SendMessageWidgetState extends State { sendMessageConfig: widget.sendMessageConfig, onRecordingComplete: _onRecordingComplete, onImageSelected: (images, messageId) { - if (widget.sendMessageConfig - .shouldSendImageWithText) { - if (images.isNotEmpty) { - _selectedImageViewWidgetKey.currentState - ?.selectedImages.value = [ - ...?_selectedImageViewWidgetKey - .currentState?.selectedImages.value, - images - ]; - - FocusScope.of(context) - .requestFocus(_focusNode); - } - } else { - _onImageSelected(images, ''); - } + handleImageSelection(images); }, ), ], @@ -284,6 +269,21 @@ class SendMessageWidgetState extends State { } } + /// Handles image selection and focus logic. Can be called externally to add images to the selection. + void handleImageSelection(String images) { + if (widget.sendMessageConfig.shouldSendImageWithText) { + if (images.isNotEmpty) { + _selectedImageViewWidgetKey.currentState?.selectedImages.value = [ + ...?_selectedImageViewWidgetKey.currentState?.selectedImages.value, + images + ]; + FocusScope.of(context).requestFocus(_focusNode); + } + } else { + _onImageSelected(images, ''); + } + } + double get _bottomPadding => (!kIsWeb && Platform.isIOS) ? (_focusNode.hasFocus ? bottomPadding1