fix:🐛Reaction widget gets cutOff when it width is greater then messag…

…e width.
SimformSolutionsPvtLtd · Sep 29, 2023 · e83e1a9 · e83e1a9
1 parent 31eedc2
commit e83e1a9
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## [1.4.0] (UnReleased)
+
+* **Fix**: Reaction widget gets cutOff when it width is greater then message width/Screen width.
+
 ## [1.3.1]
 
 * **Feat**: [105](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/pull/105) Allow user 

diff --git a/lib/src/models/message_reaction_configuration.dart b/lib/src/models/message_reaction_configuration.dart
@@ -23,6 +23,7 @@ import 'package:flutter/material.dart';
 
 class MessageReactionConfiguration {
   /// Used for giving size of reaction on message.
+  /// Will apply only for one-one chat.
   final double? reactionSize;
 
   /// Used for giving margin of reaction on message.

diff --git a/lib/src/widgets/reaction_widget.dart b/lib/src/widgets/reaction_widget.dart
@@ -65,8 +65,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 +105,18 @@ class _ReactionWidgetState extends State<ReactionWidget> {
             child: Row(
               children: [
                 Text(
-                  reactionsSet.join(' '),
+                  isGroupChat
+                      ? reactionsSet.take(3).join(' ')
+                      : reactionsSet.join(' '),
                   style: TextStyle(
-                    fontSize: messageReactionConfig?.reactionSize ?? 13,
+                    fontSize: isGroupChat
+                        ? messageReactionConfig?.reactionSize ?? 13
+                        : 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
                   if (!(widget.reaction.reactedUserIds.length > 3) &&
                       !(reactionsSet.length > 1))
                     ...List.generate(
@@ -124,6 +132,9 @@ class _ReactionWidgetState extends State<ReactionWidget> {
                             messageReactionConfig?.profileCircleRadius,
                       ),
                     ),
+
+                  /// ReactionUser length > 3 && all have reacted with the same
+                  /// reaction then this condition will be executed
                   if (widget.reaction.reactedUserIds.length > 3 &&
                       !(reactionsSet.length > 1))
                     Padding(

diff --git a/pubspec.yaml b/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