fix:🐛Reaction widget gets cutOff when it width is greater then message width for the image message type.

Author: jaiminrana05

CHANGELOG.md

@@ -1,70 +1,76 @@
+## [1.4.0] (UnReleased)
+
+* **Fix**: Reaction widget gets cutOff when it width is greater then message width for the Image
+  message type.
+
 ## [1.3.1]
 
-* **Feat**: [105](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/pull/105) Allow user 
-  to get callback when image is picked so user can perform operation like crop. Allow user to pass 
+* **Feat**: [105](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/pull/105) Allow user
+  to get callback when image is picked so user can perform operation like crop. Allow user to pass
   configuration like height, width, image quality and preferredCameraDevice.
-* **Fix**: [95](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/95) Fix issue of 
+* **Fix**: [95](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/95) Fix issue of
   chat is added to bottom while `loadMoreData` callback.
-* **Fix**: [109](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/109) Added 
-  support for the hiding/Un-hiding gallery and camera buttons 
- 
+* **Fix**: [109](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/109) Added
+  support for the hiding/Un-hiding gallery and camera buttons
+
 ## [1.3.0]
 
 * **Feat**: [71](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/pull/71) Added Callback
   when a user starts/stops composing typing a message.
 * **Fix**: [78](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/pull/78) Fix issue of
   unmodifiable list.
-* **Feat**: [76](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/pull/76) Message Receipts.
+* **Feat**: [76](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/pull/76) Message
+  Receipts.
 * **Fix**: [81](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/pull/81) Fix issue of
   TypingIndicator Rebuilding ChatView.
 * **Fix**: [94](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/pull/94) Fixed deprecated
   `showRecentsTab` property with new `recentTabBehavior`.
 * Support for latest flutter version `3.10.5`.
-* Update dependencies `http` to version `1.1.0` and `image_picker` to version range `'>=0.8.9 <2.0.0'`.
-
+* Update dependencies `http` to version `1.1.0` and `image_picker` to version
+  range `'>=0.8.9 <2.0.0'`.
 
 ## [1.2.1]
 
 * **Fix**: [60](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/60) Fix image from
   file is not loaded.
 * **Fix**: [61](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/61) Fix issue of
   audio message is not working.
-* **Feat**: [65](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/65) Add callback 
+* **Feat**: [65](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/65) Add callback
   when user react on message.
 
-
 ## [1.2.0+1]
 
-* **Feat**: [42](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/42) Ability to 
+* **Feat**: [42](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/42) Ability to
   get callback on tap of profile circle avatar.
 * **Breaking**: Add `messageType` in `onSendTap` callback for encountering messages.
 * **Breaking**: Remove `onRecordingComplete` and you can get Recorded audio in `onSendTap` callback
   with `messageType`.
 * **Breaking**: Remove `onImageSelected` from `ImagePickerIconsConfiguration` and can get selected
   image in `onSendTap` callback with `messageType`.
-* **Feat**: [49](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/49) Add `onUrlDetect`
+* **Feat**: [49](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/49)
+  Add `onUrlDetect`
   callback for opening urls.
 * **Feat**: [51](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/51) Ability to
   get callback on long press of profile circle avatar.
 
 ## [1.1.0]
 
-* **Feat**: [37](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/37) Ability to 
+* **Feat**: [37](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/37) Ability to
   enable or disable specific features.
 * **Feat**: [34](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/34) Ability to
   add voice message.
 * **Breaking**: Remove `onEmojiTap` from `ReactionPopupConfiguration`, it can be handled internally.
-* **Breaking**: Remove `horizontalDragToShowMessageTime` from `ChatBackgroundConfiguration` and 
+* **Breaking**: Remove `horizontalDragToShowMessageTime` from `ChatBackgroundConfiguration` and
   add `enableSwipeToSeeTime` parameter with same feature in `FeatureActiveConfig`.
 * **Breaking**: Remove `showReceiverProfileCircle` and add `enableOtherUserProfileAvatar` parameter
   with same feature in `FeatureActiveConfig`.
-* * **Breaking**: Move `enablePagination` parameter from `ChatView` to `FeatureActiveConfig`.
+* **Breaking**: Move `enablePagination` parameter from `ChatView` to `FeatureActiveConfig`.
 
 ## [1.0.1]
 
-* **Fix**: [32](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/32) Fix issue of 
+* **Fix**: [32](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/32) Fix issue of
   while replying to image it highlights the link instead of the image.
-* **Fix**: [35](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/35) Fix issue of 
+* **Fix**: [35](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/35) Fix issue of
   removing reaction which is reacted accidentally.
 
 ## [1.0.0+1]

lib/src/models/message_reaction_configuration.dart

@@ -19,6 +19,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+import 'package:chatview/src/utils/constants/constants.dart';
 import 'package:flutter/material.dart';
 
 class MessageReactionConfiguration {
@@ -59,6 +60,10 @@ class MessageReactionConfiguration {
   /// Used for padding to reacted user profile circle.
   final EdgeInsets? profileCirclePadding;
 
+  /// Maximum number of reaction(emoji) to be visible on a message.
+  /// Default value is 3.
+  final int reactionCount;
+
   const MessageReactionConfiguration({
     this.reactionsBottomSheetConfig,
     this.reactionCountTextStyle,
@@ -72,6 +77,7 @@ class MessageReactionConfiguration {
     this.borderWidth,
     this.profileCircleRadius,
     this.profileCirclePadding,
+    this.reactionCount = messageReactionCount,
   });
 }
 

lib/src/utils/constants/constants.dart

@@ -58,6 +58,7 @@ const double replyBorderRadius1 = 30;
 const double replyBorderRadius2 = 18;
 const double leftPadding3 = 12;
 const double textFieldBorderRadius = 27;
+const int messageReactionCount = 3;
 
 applicationDateFormatter(DateTime inputTime) {
   if (DateTime.now().difference(inputTime).inDays <= 3) {

lib/src/utils/package_strings.dart

@@ -34,4 +34,5 @@ class PackageStrings {
   static const String photo = "Photo";
   static const String send = "Send";
   static const String you = "You";
+  static const String emptyString = ' ';
 }

lib/src/widgets/image_message_view.dart

@@ -74,6 +74,7 @@ class ImageMessageView extends StatelessWidget {
       children: [
         if (isMessageBySender) iconButton,
         Stack(
+          clipBehavior: Clip.none,
           children: [
             GestureDetector(
               onTap: () => imageMessageConfig?.onTap != null

lib/src/widgets/reaction_widget.dart

@@ -21,10 +21,12 @@
  */
 import 'package:chatview/src/extensions/extensions.dart';
 import 'package:chatview/src/utils/measure_size.dart';
+import 'package:chatview/src/utils/package_strings.dart';
 import 'package:chatview/src/widgets/reactions_bottomsheet.dart';
 import 'package:flutter/material.dart';
 
 import '../../chatview.dart';
+import '../utils/constants/constants.dart';
 
 class ReactionWidget extends StatefulWidget {
   const ReactionWidget({
@@ -65,8 +67,10 @@ class _ReactionWidgetState extends State<ReactionWidget> {
 
   @override
   Widget build(BuildContext context) {
-    //// Convert into set to remove reduntant values
+    //// Convert into set to remove redundant values
     final reactionsSet = widget.reaction.reactions.toSet();
+    final isGroupChat = widget.reaction.reactedUserIds.length > 2;
+
     return Positioned(
       bottom: 0,
       right: widget.isMessageBySender && needToExtend ? 0 : null,
@@ -103,12 +107,21 @@ class _ReactionWidgetState extends State<ReactionWidget> {
             child: Row(
               children: [
                 Text(
-                  reactionsSet.join(' '),
+                  isGroupChat
+                      ? reactionsSet
+                          .take(messageReactionConfig?.reactionCount ??
+                              messageReactionCount)
+                          .join(PackageStrings.emptyString)
+                      : reactionsSet.join(PackageStrings.emptyString),
                   style: TextStyle(
                     fontSize: messageReactionConfig?.reactionSize ?? 13,
                   ),
                 ),
                 if ((chatController?.chatUsers.length ?? 0) > 1) ...[
+                  /// when reaction user length is 3 or <3 && they all have
+                  /// reacted with the same reaction this condition will be
+                  /// true. Here we are showing reaction and user profile
+                  /// avatar.
                   if (!(widget.reaction.reactedUserIds.length > 3) &&
                       !(reactionsSet.length > 1))
                     ...List.generate(
@@ -124,6 +137,10 @@ class _ReactionWidgetState extends State<ReactionWidget> {
                             messageReactionConfig?.profileCircleRadius,
                       ),
                     ),
+
+                  /// Reaction user length is > 3 && all user have reacted
+                  /// with the same reaction then this condition will be
+                  /// executed
                   if (widget.reaction.reactedUserIds.length > 3 &&
                       !(reactionsSet.length > 1))
                     Padding(

pubspec.yaml

@@ -1,6 +1,6 @@
 name: chatview
 description: A Flutter package that allows you to integrate Chat View with highly customization options.
-version: 1.3.1
+version: 1.4.0
 issue_tracker: https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues
 repository: https://github.com/SimformSolutionsPvtLtd/flutter_chatview