Merge pull request #1132 from GetStream/hotfix/messageWidget

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(
+    return StreamTypingIndicator(
-      child: 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,21 +909,27 @@ class _StreamMessageWidgetState extends State<StreamMessageWidget>
     const usernameKey = Key('username');
 
     children.addAll([
-      if (showUsername) _buildUsername(usernameKey),
+      if (showUsername) WidgetSpan(child: _buildUsername(usernameKey)),
       if (showTimeStamp)
-        Text(
+        WidgetSpan(
+          child: Text(
             Jiffy(widget.message.createdAt.toLocal()).jm,
             style: widget.messageTheme.createdAtStyle,
           ),
-      if (showSendingIndicator) _buildSendingIndicator(),
+        ),
+      if (showSendingIndicator)
+        WidgetSpan(
+          child: _buildSendingIndicator(),
+        ),
     ]);
 
     final showThreadTail = !(hasUrlAttachments || isGiphy || isOnlyEmoji) &&
         (showThreadReplyIndicator || showInChannel);
 
-    final threadIndicatorWidgets = <Widget>[
+    final threadIndicatorWidgets = <WidgetSpan>[
       if (showThreadTail)
-        Container(
+        WidgetSpan(
+          child: Container(
             margin: EdgeInsets.only(
               bottom: context.textScaleFactor *
                   ((widget.messageTheme.repliesStyle?.fontSize ?? 1) / 2),
@@ -937,40 +943,38 @@ class _StreamMessageWidgetState extends State<StreamMessageWidget>
               ),
             ),
           ),
+        ),
       if (showInChannel || showThreadReplyIndicator) ...[
         if (showThreadParticipants)
-          SizedBox.fromSize(
+          WidgetSpan(
+            child: SizedBox.fromSize(
               size: Size((threadParticipants!.length * 8.0) + 8, 16),
               child: _buildThreadParticipantsIndicator(threadParticipants),
             ),
-        InkWell(
+          ),
+        WidgetSpan(
+          child: InkWell(
             onTap: widget.onThreadTap != null ? onThreadTap : null,
             child: Text(msg, style: widget.messageTheme.repliesStyle),
           ),
+        ),
       ],
     ];
 
-    return Row(
+    if (widget.reverse) {
-      crossAxisAlignment: CrossAxisAlignment.end,
+      children.addAll(threadIndicatorWidgets.reversed);
-      mainAxisAlignment:
+    } else {
-          widget.reverse ? MainAxisAlignment.end : MainAxisAlignment.start,
+      children.insertAll(0, threadIndicatorWidgets);
-      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;
+
-          },
+    return Text.rich(
+      TextSpan(
+        children: [
+          ...children,
+        ].insertBetween(const WidgetSpan(child: SizedBox(width: 8))),
       ),
-        if (showThreadTail && widget.reverse)
+      maxLines: 1,
-          ...threadIndicatorWidgets.reversed,
+      textAlign: widget.reverse ? TextAlign.right : TextAlign.left,
-      ].insertBetween(const SizedBox(width: 8)),
     );
   }
 
@@ -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(
+                StreamTypingIndicator(
-                  child: StreamTypingIndicator(
                   channel: StreamChannel.of(context).channel,
                   style: channelHeaderTheme.subtitleStyle,
                   parentId: parent.id,
                   alternativeWidget: defaultSubtitle,
-                  ),
                 )
               else
                 defaultSubtitle,