Merge pull request #1569 from GetStream/fix/text-scaling

packages/stream_chat_flutter/CHANGELOG.md

@@ -18,6 +18,8 @@
   unread indicator when `currentUser` is not present in the initial member list.
 - [[#1487]](https://github.com/GetStream/stream-chat-flutter/issues/1487) Use localized title
   for `WebOrDesktopAttachmentPickerOption` in `StreamMessageInput`.
+- [[#1250]](https://github.com/GetStream/stream-chat-flutter/issues/1250) Fixed bottomRow widgetSpans getting resized
+  twice when `textScaling` is enabled.
 
 ✅ Added
 

packages/stream_chat_flutter/lib/src/message_widget/bottom_row.dart

@@ -153,8 +153,6 @@ class BottomRow extends StatelessWidget {
       }
     }
 
-    final children = <WidgetSpan>[];
-
     final threadParticipants = message.threadParticipants?.take(2);
     final showThreadParticipants = threadParticipants?.isNotEmpty == true;
     final replyCount = message.replyCount;
@@ -183,75 +181,69 @@ class BottomRow extends StatelessWidget {
 
     const usernameKey = Key('username');
 
-    children.addAll([
+    final children = [
       if (showUsername)
-        WidgetSpan(
+        usernameBuilder?.call(context, message) ??
-          child: usernameBuilder?.call(context, message) ??
+            Username(
-              Username(
+              key: usernameKey,
-                key: usernameKey,
+              message: message,
-                message: message,
+              messageTheme: messageTheme,
-                messageTheme: messageTheme,
+            ),
-              ),
-        ),
       if (showTimeStamp)
-        WidgetSpan(
+        Text(
-          child: Text(
+          Jiffy(message.createdAt.toLocal()).jm,
-            Jiffy(message.createdAt.toLocal()).jm,
+          style: messageTheme.createdAtStyle,
-            style: messageTheme.createdAtStyle,
-          ),
         ),
       if (showSendingIndicator)
-        WidgetSpan(
+        sendingIndicatorBuilder?.call(context, message) ??
-          child: sendingIndicatorBuilder?.call(context, message) ??
+            SendingIndicatorBuilder(
-              SendingIndicatorBuilder(
+              messageTheme: messageTheme,
-                messageTheme: messageTheme,
+              message: message,
-                message: message,
+              hasNonUrlAttachments: hasNonUrlAttachments,
-                hasNonUrlAttachments: hasNonUrlAttachments,
+              streamChat: streamChat,
-                streamChat: streamChat,
+              streamChatTheme: streamChatTheme,
-                streamChatTheme: streamChatTheme,
+            ),
-              ),
+    ];
-        ),
-    ]);
 
     final showThreadTail = !(hasUrlAttachments || isGiphy || isOnlyEmoji) &&
         (showThreadReplyIndicator || showInChannel);
 
-    final threadIndicatorWidgets = <WidgetSpan>[
+    final threadIndicatorWidgets = [
       if (showThreadTail)
-        WidgetSpan(
+        // Added builder to use the nearest context to get the right
-          child: Padding(
+        // textScaleFactor value.
-            padding: EdgeInsets.only(
+        Builder(
-              bottom: context.textScaleFactor *
+          builder: (context) {
-                  ((messageTheme.repliesStyle?.fontSize ?? 1) / 2),
+            return Padding(
-            ),
+              padding: EdgeInsets.only(
-            child: CustomPaint(
+                bottom: context.textScaleFactor *
-              size: const Size(16, 32) * context.textScaleFactor,
+                    ((messageTheme.repliesStyle?.fontSize ?? 1) / 2),
-              painter: ThreadReplyPainter(
-                context: context,
-                color: messageTheme.messageBorderColor,
-                reverse: reverse,
               ),
-            ),
+              child: CustomPaint(
-          ),
+                size: const Size(16, 32) * context.textScaleFactor,
+                painter: ThreadReplyPainter(
+                  context: context,
+                  color: messageTheme.messageBorderColor,
+                  reverse: reverse,
+                ),
+              ),
+            );
+          },
         ),
       if (showInChannel || showThreadReplyIndicator) ...[
         if (showThreadParticipants)
-          WidgetSpan(
+          SizedBox.fromSize(
-            child: SizedBox.fromSize(
+            size: Size((threadParticipants!.length * 8.0) + 8, 16),
-              size: Size((threadParticipants!.length * 8.0) + 8, 16),
+            child: ThreadParticipants(
-              child: ThreadParticipants(
+              threadParticipants: threadParticipants,
-                threadParticipants: threadParticipants,
+              streamChatTheme: streamChatTheme,
-                streamChatTheme: streamChatTheme,
-              ),
             ),
           ),
-        WidgetSpan(
+        MouseRegion(
-          child: MouseRegion(
+          cursor: SystemMouseCursors.click,
-            cursor: SystemMouseCursors.click,
+          child: GestureDetector(
-            child: GestureDetector(
+            onTap: _onThreadTap,
-              onTap: _onThreadTap,
+            child: Text(msg, style: messageTheme.repliesStyle),
-              child: Text(msg, style: messageTheme.repliesStyle),
-            ),
           ),
         ),
       ],
@@ -266,8 +258,21 @@ class BottomRow extends StatelessWidget {
     return Text.rich(
       TextSpan(
         children: [
-          ...children,
+          ...children.insertBetween(const SizedBox(width: 8)).map((child) {
-        ].insertBetween(const WidgetSpan(child: SizedBox(width: 8))),
+            final mediaQueryData = MediaQuery.of(context);
+            return WidgetSpan(
+              child: MediaQuery(
+                // Hardcoding the textScaleFactor to 1 to avoid the multiple
+                // resizing of the text. This is needed because the
+                // textScaleFactor is already applied to the textSpan.
+                //
+                // issue: https://github.com/GetStream/stream-chat-flutter/issues/1250
+                data: mediaQueryData.copyWith(textScaleFactor: 1),
+                child: child,
+              ),
+            );
+          }),
+        ],
       ),
       maxLines: 1,
       textAlign: reverse ? TextAlign.right : TextAlign.left,

packages/stream_chat_flutter/lib/src/scroll_view/channel_scroll_view/stream_channel_list_view.dart

@@ -380,41 +380,3 @@ class StreamChannelListSeparator extends StatelessWidget {
     );
   }
 }
-
-/// A widget that is used to display an error screen
-/// when [StreamChannelListController] fails to load initial channels.
-class StreamChannelListErrorWidget extends StatelessWidget {
-  /// Creates a new instance of [StreamChannelListErrorWidget] widget.
-  const StreamChannelListErrorWidget({
-    super.key,
-    this.onPressed,
-  });
-
-  /// The callback to invoke when the user taps on the retry button.
-  final VoidCallback? onPressed;
-
-  @override
-  Widget build(BuildContext context) => Column(
-        mainAxisAlignment: MainAxisAlignment.center,
-        children: <Widget>[
-          Text.rich(
-            TextSpan(
-              children: [
-                const WidgetSpan(
-                  child: Padding(
-                    padding: EdgeInsets.only(right: 2),
-                    child: Icon(Icons.error_outline),
-                  ),
-                ),
-                TextSpan(text: context.translations.loadingChannelsError),
-              ],
-            ),
-            style: Theme.of(context).textTheme.titleLarge,
-          ),
-          TextButton(
-            onPressed: onPressed,
-            child: Text(context.translations.retryLabel),
-          ),
-        ],
-      );
-}