fix: 🔨 swipe to reply gesture interaction update

SimformSolutionsPvtLtd · Jul 31, 2024 · 7b80f1f · 7b80f1f
1 parent 4de800d
commit 7b80f1f
Show file tree

Hide file tree

Showing 5 changed files with 148 additions and 174 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,9 +1,11 @@
 ## [2.0.1]
 
-* **Fix**: [226](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/226) Fixed 
+* **Fix**: [226](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/226) Fixed
   the icons for starting and stopping recording were reversed
 * **Fix**: [217](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/pull/217) Fixed y
   position of reaction popup
+* **Fix**: [233](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/pull/233) swipe to reply
+  gesture interaction update
 * **Feat** [223](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/223) Ability to
   hide share icon in image view
 

diff --git a/lib/src/models/swipe_to_reply_configuration.dart b/lib/src/models/swipe_to_reply_configuration.dart
@@ -25,8 +25,11 @@ class SwipeToReplyConfiguration {
   /// Used to give color of reply icon while swipe to reply.
   final Color? replyIconColor;
 
-  /// Used to give animation duration while swipe to reply.
-  final Duration? animationDuration;
+  /// Used to give color of circular progress around reply icon while swipe to reply.
+  final Color? replyIconProgressRingColor;
+
+  /// Used to give color of reply icon background when swipe to reply reach swipe limit.
+  final Color? replyIconBackgroundColor;
 
   /// Provides callback when user swipe chat bubble from left side.
   final void Function(String message, String sentBy)? onLeftSwipe;
@@ -36,7 +39,8 @@ class SwipeToReplyConfiguration {
 
   const SwipeToReplyConfiguration({
     this.replyIconColor,
-    this.animationDuration,
+    this.replyIconProgressRingColor,
+    this.replyIconBackgroundColor,
     this.onRightSwipe,
     this.onLeftSwipe,
   });

diff --git a/lib/src/widgets/chat_bubble_widget.dart b/lib/src/widgets/chat_bubble_widget.dart
@@ -131,17 +131,7 @@ class _ChatBubbleWidgetState extends State<ChatBubbleWidget> {
               (featureActiveConfig?.enableOtherUserProfileAvatar ?? true))
             profileCircle(messagedUser),
           Expanded(
-            child: SwipeToReply(
-              onLeftSwipe: featureActiveConfig?.enableSwipeToReply ?? true
-                  ? isMessageBySender
-                      ? onLeftSwipe
-                      : onRightSwipe
-                  : null,
-              replyIconColor: chatListConfig.swipeToReplyConfig?.replyIconColor,
-              swipeToReplyAnimationDuration:
-                  chatListConfig.swipeToReplyConfig?.animationDuration,
-              child: _messagesWidgetColumn(messagedUser),
-            ),
+            child: _messagesWidgetColumn(messagedUser),
           ),
           if (isMessageBySender) ...[getReceipt()],
           if (isMessageBySender &&
@@ -279,40 +269,57 @@ class _ChatBubbleWidgetState extends State<ChatBubbleWidget> {
                   onTap: () => widget.onReplyTap
                       ?.call(widget.message.replyMessage.messageId),
                 ),
-        MessageView(
-          outgoingChatBubbleConfig:
-              chatListConfig.chatBubbleConfig?.outgoingChatBubbleConfig,
-          isLongPressEnable:
-              (featureActiveConfig?.enableReactionPopup ?? true) ||
-                  (featureActiveConfig?.enableReplySnackBar ?? true),
-          inComingChatBubbleConfig:
-              chatListConfig.chatBubbleConfig?.inComingChatBubbleConfig,
-          message: widget.message,
-          isMessageBySender: isMessageBySender,
-          messageConfig: chatListConfig.messageConfig,
-          onLongPress: widget.onLongPress,
-          chatBubbleMaxWidth: chatListConfig.chatBubbleConfig?.maxWidth,
-          longPressAnimationDuration:
-              chatListConfig.chatBubbleConfig?.longPressAnimationDuration,
-          onDoubleTap: featureActiveConfig?.enableDoubleTapToLike ?? false
-              ? chatListConfig.chatBubbleConfig?.onDoubleTap ??
-                  (message) => currentUser != null
-                      ? chatController?.setReaction(
-                          emoji: heart,
-                          messageId: message.id,
-                          userId: currentUser!.id,
-                        )
-                      : null
+        SwipeToReply(
+          onLeftSwipe: (featureActiveConfig?.enableSwipeToReply ?? true) &&
+                  isMessageBySender
+              ? onLeftSwipe
+              : null,
+          onRightSwipe: (featureActiveConfig?.enableSwipeToReply ?? true) &&
+                  !isMessageBySender
+              ? onRightSwipe
               : null,
-          shouldHighlight: widget.shouldHighlight,
-          controller: chatController,
-          highlightColor: chatListConfig.repliedMessageConfig
-                  ?.repliedMsgAutoScrollConfig.highlightColor ??
-              Colors.grey,
-          highlightScale: chatListConfig.repliedMessageConfig
-                  ?.repliedMsgAutoScrollConfig.highlightScale ??
-              1.1,
-          onMaxDuration: _onMaxDuration,
+          child: Column(
+            crossAxisAlignment: isMessageBySender
+                ? CrossAxisAlignment.end
+                : CrossAxisAlignment.start,
+            children: [
+              MessageView(
+                outgoingChatBubbleConfig:
+                    chatListConfig.chatBubbleConfig?.outgoingChatBubbleConfig,
+                isLongPressEnable:
+                    (featureActiveConfig?.enableReactionPopup ?? true) ||
+                        (featureActiveConfig?.enableReplySnackBar ?? true),
+                inComingChatBubbleConfig:
+                    chatListConfig.chatBubbleConfig?.inComingChatBubbleConfig,
+                message: widget.message,
+                isMessageBySender: isMessageBySender,
+                messageConfig: chatListConfig.messageConfig,
+                onLongPress: widget.onLongPress,
+                chatBubbleMaxWidth: chatListConfig.chatBubbleConfig?.maxWidth,
+                longPressAnimationDuration:
+                    chatListConfig.chatBubbleConfig?.longPressAnimationDuration,
+                onDoubleTap: featureActiveConfig?.enableDoubleTapToLike ?? false
+                    ? chatListConfig.chatBubbleConfig?.onDoubleTap ??
+                        (message) => currentUser != null
+                            ? chatController?.setReaction(
+                                emoji: heart,
+                                messageId: message.id,
+                                userId: currentUser!.id,
+                              )
+                            : null
+                    : null,
+                shouldHighlight: widget.shouldHighlight,
+                controller: chatController,
+                highlightColor: chatListConfig.repliedMessageConfig
+                        ?.repliedMsgAutoScrollConfig.highlightColor ??
+                    Colors.grey,
+                highlightScale: chatListConfig.repliedMessageConfig
+                        ?.repliedMsgAutoScrollConfig.highlightScale ??
+                    1.1,
+                onMaxDuration: _onMaxDuration,
+              ),
+            ],
+          ),
         ),
       ],
     );

diff --git a/lib/src/widgets/reply_icon.dart b/lib/src/widgets/reply_icon.dart
@@ -19,50 +19,52 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+import 'package:chatview/src/extensions/extensions.dart';
 import 'package:flutter/material.dart';
 
 class ReplyIcon extends StatelessWidget {
   const ReplyIcon({
     Key? key,
-    required this.scaleAnimation,
-    required this.slideAnimation,
-    this.replyIconColor,
+    required this.animationValue,
+    this.replyIconSize = 25,
   }) : super(key: key);
 
   /// Represents scale animation value of icon when user swipes for reply.
-  final Animation<double> scaleAnimation;
-
-  /// Represents slide animation value of chat bubble when user swipes for reply.
-  final Animation<Offset> slideAnimation;
+  final double animationValue;
 
   /// Allow user to set color of icon which is appeared when user swipes for reply.
-  final Color? replyIconColor;
+  final double replyIconSize;
 
   @override
   Widget build(BuildContext context) {
+    final swipeToReplyConfig = context.chatListConfig.swipeToReplyConfig;
     return Stack(
       alignment: Alignment.center,
       children: [
-        Transform.scale(
-          scale: scaleAnimation.value,
-          child: CircleAvatar(
-            radius: 14,
-            backgroundColor:
-                scaleAnimation.value == 1.0 ? Colors.grey : Colors.transparent,
-            child: Icon(
-              Icons.reply_rounded,
-              color: replyIconColor ?? Colors.black,
-            ),
+        Container(
+          decoration: BoxDecoration(
+            borderRadius: BorderRadius.circular(replyIconSize),
+            color: animationValue >= 1.0
+                ? swipeToReplyConfig?.replyIconBackgroundColor ??
+                    Colors.grey.shade300
+                : Colors.transparent,
           ),
-        ),
-        SizedBox(
-          height: 25,
-          width: 25,
+          height: replyIconSize,
+          width: replyIconSize,
           child: CircularProgressIndicator(
-            value: scaleAnimation.value,
+            value: animationValue,
             backgroundColor: Colors.transparent,
             strokeWidth: 1.5,
-            color: replyIconColor ?? Colors.black,
+            color: swipeToReplyConfig?.replyIconProgressRingColor ??
+                Colors.grey.shade300,
+          ),
+        ),
+        Transform.scale(
+          scale: animationValue,
+          child: Icon(
+            Icons.reply_rounded,
+            color: swipeToReplyConfig?.replyIconColor ?? Colors.black,
+            size: replyIconSize - 5,
           ),
         ),
       ],