From a02aaaaa651971515cd6895365d1c7fd2e2153b1 Mon Sep 17 00:00:00 2001 From: Sahil Kumar Date: Fri, 8 Jan 2021 22:48:37 +0530 Subject: [PATCH] [MessageListView] Refactor message separators Signed-off-by: Sahil Kumar --- lib/src/message_list_view.dart | 105 ++++++++++++++++++++------------- lib/src/message_widget.dart | 12 +++- 2 files changed, 75 insertions(+), 42 deletions(-) diff --git a/lib/src/message_list_view.dart b/lib/src/message_list_view.dart index e8c4923f..7a568361 100644 --- a/lib/src/message_list_view.dart +++ b/lib/src/message_list_view.dart @@ -324,7 +324,7 @@ class _MessageListViewState extends State { onInBetweenOfPage: () { _inBetweenList = true; }, - child: ScrollablePositionedList.builder( + child: ScrollablePositionedList.separated( key: ValueKey(initialIndex + initialAlignment), itemPositionsListener: _itemPositionListener, addAutomaticKeepAlives: true, @@ -336,6 +336,45 @@ class _MessageListViewState extends State { itemCount: messages.length + 2 + (widget.parentMessage != null ? 1 : 0), + separatorBuilder: (context, i) { + if (i == messages.length) return Offstage(); + if (i == messages.length + 2) return Offstage(); + if (i == messages.length + 1) return Offstage(); + if (i == 0) return SizedBox(height: 30); + final message = messages[i]; + final nextMessage = i > 0 ? messages[i - 1] : null; + if (nextMessage != null && + !Jiffy(message.createdAt.toLocal()).isSame( + nextMessage.createdAt.toLocal(), + Units.DAY, + )) { + final divider = widget.dateDividerBuilder != null + ? widget.dateDividerBuilder( + nextMessage.createdAt.toLocal(), + ) + : DateDivider( + dateTime: nextMessage.createdAt.toLocal(), + ); + return Padding( + padding: const EdgeInsets.symmetric(vertical: 12.0), + child: divider, + ); + } + num timeDiff = 0; + if (nextMessage != null) { + timeDiff = Jiffy(nextMessage.createdAt.toLocal()).diff( + message.createdAt.toLocal(), + Units.MINUTE, + ); + } + final isNextUserSame = (i - 1 >= 0) && + message.user.id == messages[i - 1]?.user?.id; + final isThread = message.replyCount > 0; + if (timeDiff >= 1 || !isNextUserSame || isThread) { + return SizedBox(height: 8); + } + return SizedBox(height: 2); + }, itemBuilder: (context, i) { if (i == messages.length + 2) { if (widget.parentMessageBuilder != null) { @@ -383,7 +422,6 @@ class _MessageListViewState extends State { ); } final message = messages[i - 1]; - final nextMessage = (i - 1) > 0 ? messages[i - 2] : null; Widget messageWidget; @@ -419,27 +457,6 @@ class _MessageListViewState extends State { messageWidget = buildMessage(message, messages, i); } } - - if (nextMessage != null && - !Jiffy(message.createdAt.toLocal()).isSame( - nextMessage.createdAt.toLocal(), Units.DAY)) { - return Column( - crossAxisAlignment: CrossAxisAlignment.stretch, - children: [ - messageWidget, - Padding( - padding: const EdgeInsets.symmetric(vertical: 12.0), - child: widget.dateDividerBuilder != null - ? widget.dateDividerBuilder( - nextMessage.createdAt.toLocal()) - : DateDivider( - dateTime: nextMessage.createdAt.toLocal(), - ), - ), - ], - ); - } - return messageWidget; }, ), @@ -740,8 +757,17 @@ class _MessageListViewState extends State { final userId = StreamChat.of(context).user.id; final isMyMessage = message.user.id == userId; - final isNextUser = - index - 2 >= 0 && message.user.id == messages[index - 2]?.user?.id; + final nextMessage = index - 2 >= 0 ? messages[index - 2] : null; + final isNextUserSame = + nextMessage != null && message.user.id == nextMessage.user.id; + + num timeDiff = 0; + if (nextMessage != null) { + timeDiff = Jiffy(nextMessage.createdAt.toLocal()).diff( + message.createdAt.toLocal(), + Units.MINUTE, + ); + } final channel = streamChannel.channel; final readList = channel.state?.read @@ -769,12 +795,7 @@ class _MessageListViewState extends State { message: message, reverse: isMyMessage, showReactions: !message.isDeleted, - padding: EdgeInsets.only( - left: 8.0, - right: 8.0, - bottom: index == 0 ? 30 : (isNextUser ? 2 : 7), - top: 3, - ), + padding: const EdgeInsets.symmetric(horizontal: 8.0), onQuotedMessageTap: (quotedMessageId) async { final scrollToIndex = () { final index = messages.indexWhere((m) => m.id == quotedMessageId); @@ -797,12 +818,13 @@ class _MessageListViewState extends State { }, showInChannelIndicator: widget.parentMessage == null, showThreadReplyIndicator: widget.parentMessage == null, - showUsername: !isMyMessage && !isNextUser, - showSendingIndicator: isMyMessage && - (index == 0 || message.status != MessageSendingStatus.SENT) - ? DisplayWidget.show - : DisplayWidget.hide, - showTimestamp: !isNextUser || readList?.isNotEmpty == true, + showUsername: !isMyMessage && (timeDiff >= 1 || !isNextUserSame), + showSendingIndicator: + isMyMessage && (index == 0 || timeDiff >= 1 || !isNextUserSame) + ? DisplayWidget.show + : DisplayWidget.hide, + showTimestamp: + !isNextUserSame || readList?.isNotEmpty == true || timeDiff >= 1, showEditMessage: isMyMessage, showDeleteMessage: isMyMessage, borderSide: isMyMessage ? BorderSide.none : null, @@ -810,20 +832,23 @@ class _MessageListViewState extends State { onReplyTap: widget.onReplyTap, attachmentBorderRadiusGeometry: BorderRadius.only( topLeft: Radius.circular(attachmentBorderRadius), - bottomLeft: Radius.circular(!isNextUser ? 0 : attachmentBorderRadius), + bottomLeft: Radius.circular( + timeDiff >= 1 || !isNextUserSame ? 0 : attachmentBorderRadius), topRight: Radius.circular(attachmentBorderRadius), bottomRight: Radius.circular(attachmentBorderRadius), ), attachmentPadding: const EdgeInsets.all(2), borderRadiusGeometry: BorderRadius.only( topLeft: Radius.circular(16), - bottomLeft: Radius.circular(!isNextUser ? 0 : 16), + bottomLeft: Radius.circular(timeDiff >= 1 || !isNextUserSame ? 0 : 16), topRight: Radius.circular(16), bottomRight: Radius.circular(16), ), showUserAvatar: isMyMessage ? DisplayWidget.gone - : (isNextUser ? DisplayWidget.hide : DisplayWidget.show), + : (timeDiff >= 1 || !isNextUserSame + ? DisplayWidget.show + : DisplayWidget.hide), messageTheme: isMyMessage ? StreamChatTheme.of(context).ownMessageTheme : StreamChatTheme.of(context).otherMessageTheme, diff --git a/lib/src/message_widget.dart b/lib/src/message_widget.dart index 5acf473b..430be523 100644 --- a/lib/src/message_widget.dart +++ b/lib/src/message_widget.dart @@ -278,7 +278,7 @@ class _MessageWidgetState extends State { Widget build(BuildContext context) { final avatarWidth = widget.messageTheme.avatarTheme.constraints.maxWidth; var leftPadding = - widget.showUserAvatar != DisplayWidget.gone ? avatarWidth + 8.5 : 4.5; + widget.showUserAvatar != DisplayWidget.gone ? avatarWidth + 8.5 : 0.5; final isOnlyEmoji = widget.message.text.characters.every((c) => Emoji.byChar(c) != null); @@ -330,7 +330,7 @@ class _MessageWidgetState extends State { child: PortalEntry( portal: Container( transform: - Matrix4.translationValues(-16, 2, 0), + Matrix4.translationValues(-12, 0, 0), child: _buildReactionIndicator(context), constraints: BoxConstraints(maxWidth: 22 * 6.0), @@ -372,6 +372,14 @@ class _MessageWidgetState extends State { : Card( clipBehavior: Clip.antiAlias, elevation: 0.0, + margin: EdgeInsets.symmetric( + horizontal: + widget.showUserAvatar == + DisplayWidget + .gone + ? 0 + : 4.0, + ), shape: widget.shape ?? RoundedRectangleBorder( side: isOnlyEmoji &&