fix(ui): refactor message widget bottom row

packages/stream_chat_flutter/CHANGELOG.md

@@ -8,7 +8,9 @@
 🐞 Fixed
 
 - Fixed attachment picker ui.
+- Fixed StreamChannelHeader and StreamThreadHeader subtitle alignment.
 - Fixed message widget thread indicator in reverse mode.
+- [[#1044]](https://github.com/GetStream/stream-chat-flutter/issues/1044): Refactor StreamMessageWidget bottom row to use Text.rich.
 
 🔄 Changed
 

packages/stream_chat_flutter/lib/src/channel_info.dart

@@ -100,12 +100,10 @@ class StreamChannelInfo extends StatelessWidget {
       return alternativeWidget ?? const Offstage();
     }
 
-    return Align(
-      child: StreamTypingIndicator(
-        parentId: parentId,
-        style: textStyle,
-        alternativeWidget: alternativeWidget,
-      ),
+    return StreamTypingIndicator(
+      parentId: parentId,
+      style: textStyle,
+      alternativeWidget: alternativeWidget,
     );
   }
 

packages/stream_chat_flutter/lib/src/message_widget.dart

@@ -878,7 +878,7 @@ class _StreamMessageWidgetState extends State<StreamMessageWidget>
           const Offstage();
     }
 
-    final children = <Widget>[];
+    final children = <WidgetSpan>[];
 
     final threadParticipants = widget.message.threadParticipants?.take(2);
     final showThreadParticipants = threadParticipants?.isNotEmpty == true;
@@ -909,68 +909,72 @@ class _StreamMessageWidgetState extends State<StreamMessageWidget>
     const usernameKey = Key('username');
 
     children.addAll([
-      if (showUsername) _buildUsername(usernameKey),
+      if (showUsername) WidgetSpan(child: _buildUsername(usernameKey)),
       if (showTimeStamp)
-        Text(
-          Jiffy(widget.message.createdAt.toLocal()).jm,
-          style: widget.messageTheme.createdAtStyle,
+        WidgetSpan(
+          child: Text(
+            Jiffy(widget.message.createdAt.toLocal()).jm,
+            style: widget.messageTheme.createdAtStyle,
+          ),
+        ),
+      if (showSendingIndicator)
+        WidgetSpan(
+          child: _buildSendingIndicator(),
         ),
-      if (showSendingIndicator) _buildSendingIndicator(),
     ]);
 
     final showThreadTail = !(hasUrlAttachments || isGiphy || isOnlyEmoji) &&
         (showThreadReplyIndicator || showInChannel);
 
-    final threadIndicatorWidgets = <Widget>[
+    final threadIndicatorWidgets = <WidgetSpan>[
       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,
+        WidgetSpan(
+          child: 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),
+          WidgetSpan(
+            child: SizedBox.fromSize(
+              size: Size((threadParticipants!.length * 8.0) + 8, 16),
+              child: _buildThreadParticipantsIndicator(threadParticipants),
+            ),
+          ),
+        WidgetSpan(
+          child: InkWell(
+            onTap: widget.onThreadTap != null ? onThreadTap : null,
+            child: Text(msg, style: widget.messageTheme.repliesStyle),
           ),
-        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) ...threadIndicatorWidgets,
-        ...children.map(
-          (child) {
-            Widget mappedChild = SizedBox(
-              height: context.textScaleFactor * 14,
-              child: child,
-            );
-            if (child.key == usernameKey) {
-              mappedChild = Flexible(child: mappedChild);
-            }
-            return mappedChild;
-          },
-        ),
-        if (showThreadTail && widget.reverse)
-          ...threadIndicatorWidgets.reversed,
-      ].insertBetween(const SizedBox(width: 8)),
+    if (widget.reverse) {
+      children.addAll(threadIndicatorWidgets.reversed);
+    } else {
+      children.insertAll(0, threadIndicatorWidgets);
+    }
+
+    return Text.rich(
+      TextSpan(
+        children: [
+          ...children,
+        ].insertBetween(const WidgetSpan(child: SizedBox(width: 8))),
+      ),
+      maxLines: 1,
+      textAlign: widget.reverse ? TextAlign.right : TextAlign.left,
     );
   }
 
@@ -1259,6 +1263,7 @@ class _StreamMessageWidgetState extends State<StreamMessageWidget>
         );
         if (isMessageRead) {
           child = Row(
+            mainAxisSize: MainAxisSize.min,
             children: [
               if (memberCount > 2)
                 Text(

packages/stream_chat_flutter/lib/src/thread_header.dart

@@ -186,13 +186,11 @@ class StreamThreadHeader extends StatelessWidget
                   ),
               const SizedBox(height: 2),
               if (showTypingIndicator)
-                Align(
-                  child: StreamTypingIndicator(
-                    channel: StreamChannel.of(context).channel,
-                    style: channelHeaderTheme.subtitleStyle,
-                    parentId: parent.id,
-                    alternativeWidget: defaultSubtitle,
-                  ),
+                StreamTypingIndicator(
+                  channel: StreamChannel.of(context).channel,
+                  style: channelHeaderTheme.subtitleStyle,
+                  parentId: parent.id,
+                  alternativeWidget: defaultSubtitle,
                 )
               else
                 defaultSubtitle,