Merge pull request #1118 from GetStream/hotfix/messageWidget

fix(ui): fix message widget thread indicator in reverse mode

packages/stream_chat_flutter/CHANGELOG.md

@@ -3,6 +3,7 @@
 🐞 Fixed
 
 - Fixed attachment picker ui.
+- Fixed message widget thread indicator in reverse mode.
 
 ## 4.0.1
 

packages/stream_chat_flutter/lib/src/message_widget.dart

@@ -909,17 +909,6 @@ class _StreamMessageWidgetState extends State<StreamMessageWidget>
     const usernameKey = Key('username');
 
     children.addAll([
-      if (showInChannel || showThreadReplyIndicator) ...[
-        if (showThreadParticipants)
-          SizedBox.fromSize(
-            size: Size((threadParticipants!.length * 8.0) + 8, 16),
-            child: _buildThreadParticipantsIndicator(threadParticipants),
-          ),
-        InkWell(
-          onTap: widget.onThreadTap != null ? onThreadTap : null,
-          child: Text(msg, style: widget.messageTheme.repliesStyle),
-        ),
-      ],
       if (showUsername) _buildUsername(usernameKey),
       if (showTimeStamp)
         Text(
@@ -932,26 +921,41 @@ class _StreamMessageWidgetState extends State<StreamMessageWidget>
     final showThreadTail = !(hasUrlAttachments || isGiphy || isOnlyEmoji) &&
         (showThreadReplyIndicator || showInChannel);
 
+    final threadIndicatorWidgets = <Widget>[
+      if (showThreadTail)
+        Container(
+          margin: EdgeInsets.only(
+            bottom: context.textScaleFactor *
+                ((widget.messageTheme.repliesStyle?.fontSize ?? 1) / 2),
+          ),
+          child: CustomPaint(
+            size: const Size(16, 32) * context.textScaleFactor,
+            painter: _ThreadReplyPainter(
+              context: context,
+              color: widget.messageTheme.messageBorderColor,
+              reverse: widget.reverse,
+            ),
+          ),
+        ),
+      if (showInChannel || showThreadReplyIndicator) ...[
+        if (showThreadParticipants)
+          SizedBox.fromSize(
+            size: Size((threadParticipants!.length * 8.0) + 8, 16),
+            child: _buildThreadParticipantsIndicator(threadParticipants),
+          ),
+        InkWell(
+          onTap: widget.onThreadTap != null ? onThreadTap : null,
+          child: Text(msg, style: widget.messageTheme.repliesStyle),
+        ),
+      ],
+    ];
+
     return Row(
       crossAxisAlignment: CrossAxisAlignment.end,
       mainAxisAlignment:
           widget.reverse ? MainAxisAlignment.end : MainAxisAlignment.start,
       children: [
-        if (showThreadTail && !widget.reverse)
+        if (showThreadTail && !widget.reverse) ...threadIndicatorWidgets,
-          Container(
-            margin: EdgeInsets.only(
-              bottom: context.textScaleFactor *
-                  ((widget.messageTheme.repliesStyle?.fontSize ?? 1) / 2),
-            ),
-            child: CustomPaint(
-              size: const Size(16, 32) * context.textScaleFactor,
-              painter: _ThreadReplyPainter(
-                context: context,
-                color: widget.messageTheme.messageBorderColor,
-                reverse: widget.reverse,
-              ),
-            ),
-          ),
         ...children.map(
           (child) {
             Widget mappedChild = SizedBox(
@@ -965,20 +969,7 @@ class _StreamMessageWidgetState extends State<StreamMessageWidget>
           },
         ),
         if (showThreadTail && widget.reverse)
-          Container(
+          ...threadIndicatorWidgets.reversed,
-            margin: EdgeInsets.only(
-              bottom: context.textScaleFactor *
-                  ((widget.messageTheme.repliesStyle?.fontSize ?? 1) / 2),
-            ),
-            child: CustomPaint(
-              size: const Size(16, 32) * context.textScaleFactor,
-              painter: _ThreadReplyPainter(
-                context: context,
-                color: widget.messageTheme.messageBorderColor,
-                reverse: widget.reverse,
-              ),
-            ),
-          ),
       ].insertBetween(const SizedBox(width: 8)),
     );
   }