From c158924b0edac3e0cae7299db578fc74591e8378 Mon Sep 17 00:00:00 2001 From: Salvatore Giordano Date: Fri, 6 May 2022 12:25:49 +0200 Subject: [PATCH 1/7] fix(ui): fix message widget thread indicator --- .../lib/src/message_widget.dart | 20 ++++--------------- 1 file changed, 4 insertions(+), 16 deletions(-) diff --git a/packages/stream_chat_flutter/lib/src/message_widget.dart b/packages/stream_chat_flutter/lib/src/message_widget.dart index ae6e652c0..7acb2c12e 100644 --- a/packages/stream_chat_flutter/lib/src/message_widget.dart +++ b/packages/stream_chat_flutter/lib/src/message_widget.dart @@ -909,7 +909,7 @@ class _StreamMessageWidgetState extends State const usernameKey = Key('username'); children.addAll([ - if (showUsername) _buildUsername(usernameKey), + if (showUsername) Flexible(child: _buildUsername(usernameKey)), if (showTimeStamp) Text( Jiffy(widget.message.createdAt.toLocal()).jm, @@ -955,21 +955,9 @@ class _StreamMessageWidgetState extends State 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, + if (!widget.reverse) ...threadIndicatorWidgets, + ...children, + if (widget.reverse) ...threadIndicatorWidgets.reversed, ].insertBetween(const SizedBox(width: 8)), ); } From 3297d73e0627fa7f57733faf3bac770cd8ea1d08 Mon Sep 17 00:00:00 2001 From: Salvatore Giordano Date: Tue, 10 May 2022 10:36:12 +0200 Subject: [PATCH 2/7] fix(ui): fix headers alignment --- .../stream_chat_flutter/lib/src/channel_info.dart | 10 ++++------ .../stream_chat_flutter/lib/src/thread_header.dart | 12 +++++------- 2 files changed, 9 insertions(+), 13 deletions(-) diff --git a/packages/stream_chat_flutter/lib/src/channel_info.dart b/packages/stream_chat_flutter/lib/src/channel_info.dart index b30058b9b..9dcfb9b4b 100644 --- a/packages/stream_chat_flutter/lib/src/channel_info.dart +++ b/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, ); } diff --git a/packages/stream_chat_flutter/lib/src/thread_header.dart b/packages/stream_chat_flutter/lib/src/thread_header.dart index f6f77a32c..2767b76bf 100644 --- a/packages/stream_chat_flutter/lib/src/thread_header.dart +++ b/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, From 6c1e3adf4a3ce83bb149501ca6056754f90917dd Mon Sep 17 00:00:00 2001 From: Salvatore Giordano Date: Tue, 10 May 2022 10:37:02 +0200 Subject: [PATCH 3/7] fix(ui): refactor message widget bottom row --- .../lib/src/message_widget.dart | 81 +++++++++++-------- 1 file changed, 48 insertions(+), 33 deletions(-) diff --git a/packages/stream_chat_flutter/lib/src/message_widget.dart b/packages/stream_chat_flutter/lib/src/message_widget.dart index 7acb2c12e..80615a5cd 100644 --- a/packages/stream_chat_flutter/lib/src/message_widget.dart +++ b/packages/stream_chat_flutter/lib/src/message_widget.dart @@ -878,7 +878,7 @@ class _StreamMessageWidgetState extends State const Offstage(); } - final children = []; + final children = []; final threadParticipants = widget.message.threadParticipants?.take(2); final showThreadParticipants = threadParticipants?.isNotEmpty == true; @@ -909,56 +909,70 @@ class _StreamMessageWidgetState extends State const usernameKey = Key('username'); children.addAll([ - if (showUsername) Flexible(child: _buildUsername(usernameKey)), + if (showUsername) + WidgetSpan(child: Flexible(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(), + alignment: PlaceholderAlignment.top, ), - if (showSendingIndicator) _buildSendingIndicator(), ]); final showThreadTail = !(hasUrlAttachments || isGiphy || isOnlyEmoji) && (showThreadReplyIndicator || showInChannel); - final threadIndicatorWidgets = [ + final threadIndicatorWidgets = [ 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 (!widget.reverse) ...threadIndicatorWidgets, - ...children, - if (widget.reverse) ...threadIndicatorWidgets.reversed, - ].insertBetween(const SizedBox(width: 8)), + return Text.rich( + TextSpan( + children: [ + if (!widget.reverse) ...threadIndicatorWidgets, + ...children, + if (widget.reverse) ...threadIndicatorWidgets.reversed, + ].insertBetween(const WidgetSpan(child: SizedBox(width: 8))), + ), + maxLines: 1, + textAlign: widget.reverse ? TextAlign.right : TextAlign.left, ); } @@ -1247,6 +1261,7 @@ class _StreamMessageWidgetState extends State ); if (isMessageRead) { child = Row( + mainAxisSize: MainAxisSize.min, children: [ if (memberCount > 2) Text( From 855ba4a747e1f81ab1ec4690f9c6f0b0c6ed4a70 Mon Sep 17 00:00:00 2001 From: Salvatore Giordano Date: Tue, 10 May 2022 10:38:10 +0200 Subject: [PATCH 4/7] chore(ui): update changelog --- packages/stream_chat_flutter/CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/stream_chat_flutter/CHANGELOG.md b/packages/stream_chat_flutter/CHANGELOG.md index 5adf5c650..640e7306e 100644 --- a/packages/stream_chat_flutter/CHANGELOG.md +++ b/packages/stream_chat_flutter/CHANGELOG.md @@ -3,7 +3,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. ## 4.0.1 From 0194db6e570680ade397c4f83955edd9b0187a66 Mon Sep 17 00:00:00 2001 From: Salvatore Giordano Date: Tue, 10 May 2022 12:12:14 +0200 Subject: [PATCH 5/7] fix(ui): fix layout --- packages/stream_chat_flutter/lib/src/message_widget.dart | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/stream_chat_flutter/lib/src/message_widget.dart b/packages/stream_chat_flutter/lib/src/message_widget.dart index 80615a5cd..dc739a72c 100644 --- a/packages/stream_chat_flutter/lib/src/message_widget.dart +++ b/packages/stream_chat_flutter/lib/src/message_widget.dart @@ -910,7 +910,7 @@ class _StreamMessageWidgetState extends State children.addAll([ if (showUsername) - WidgetSpan(child: Flexible(child: _buildUsername(usernameKey))), + WidgetSpan(child: _buildUsername(usernameKey)), if (showTimeStamp) WidgetSpan( child: Text( @@ -921,7 +921,7 @@ class _StreamMessageWidgetState extends State if (showSendingIndicator) WidgetSpan( child: _buildSendingIndicator(), - alignment: PlaceholderAlignment.top, + alignment: PlaceholderAlignment.middle, ), ]); From 6975be45f3e07df8887440884984283e306d8f67 Mon Sep 17 00:00:00 2001 From: Salvatore Giordano Date: Tue, 10 May 2022 15:48:24 +0200 Subject: [PATCH 6/7] fix(ui): fix baseline --- packages/stream_chat_flutter/lib/src/message_widget.dart | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/stream_chat_flutter/lib/src/message_widget.dart b/packages/stream_chat_flutter/lib/src/message_widget.dart index dc739a72c..5c35ee8a4 100644 --- a/packages/stream_chat_flutter/lib/src/message_widget.dart +++ b/packages/stream_chat_flutter/lib/src/message_widget.dart @@ -909,8 +909,7 @@ class _StreamMessageWidgetState extends State const usernameKey = Key('username'); children.addAll([ - if (showUsername) - WidgetSpan(child: _buildUsername(usernameKey)), + if (showUsername) WidgetSpan(child: _buildUsername(usernameKey)), if (showTimeStamp) WidgetSpan( child: Text( @@ -921,7 +920,6 @@ class _StreamMessageWidgetState extends State if (showSendingIndicator) WidgetSpan( child: _buildSendingIndicator(), - alignment: PlaceholderAlignment.middle, ), ]); From d79ce76d13b56c42cd04679a23b314bc18afb35f Mon Sep 17 00:00:00 2001 From: Salvatore Giordano Date: Tue, 10 May 2022 15:52:15 +0200 Subject: [PATCH 7/7] refactor(ui): refactor thread indicators --- .../stream_chat_flutter/lib/src/message_widget.dart | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/stream_chat_flutter/lib/src/message_widget.dart b/packages/stream_chat_flutter/lib/src/message_widget.dart index 5c35ee8a4..03020a5bb 100644 --- a/packages/stream_chat_flutter/lib/src/message_widget.dart +++ b/packages/stream_chat_flutter/lib/src/message_widget.dart @@ -926,7 +926,7 @@ class _StreamMessageWidgetState extends State final showThreadTail = !(hasUrlAttachments || isGiphy || isOnlyEmoji) && (showThreadReplyIndicator || showInChannel); - final threadIndicatorWidgets = [ + final threadIndicatorWidgets = [ if (showThreadTail) WidgetSpan( child: Container( @@ -961,12 +961,16 @@ class _StreamMessageWidgetState extends State ], ]; + if (widget.reverse) { + children.addAll(threadIndicatorWidgets.reversed); + } else { + children.insertAll(0, threadIndicatorWidgets); + } + return Text.rich( TextSpan( children: [ - if (!widget.reverse) ...threadIndicatorWidgets, ...children, - if (widget.reverse) ...threadIndicatorWidgets.reversed, ].insertBetween(const WidgetSpan(child: SizedBox(width: 8))), ), maxLines: 1,