use MessageWidget.copyWith in messagelistview

packages/stream_chat_flutter/lib/src/message_list_view.dart

@@ -56,32 +56,35 @@ typedef ReplyTapCallback = void Function(Message);
 class MessageDetails {
   /// Constructor for creating [MessageDetails]
   MessageDetails(
-    BuildContext context,
+    String currentUserId,
     this.message,
     List<Message> messages,
     this.index,
+    this.defaultMessageWidget,
   ) {
-    isMyMessage = message.user?.id == StreamChat.of(context).user?.id;
+    isMyMessage = message.user?.id == currentUserId;
     isLastUser = index + 1 < messages.length &&
         message.user?.id == messages[index + 1].user?.id;
     isNextUser =
         index - 1 >= 0 && message.user!.id == messages[index - 1].user?.id;
   }
 
+  late final MessageWidget defaultMessageWidget;
+
   /// True if the message belongs to the current user
-  bool? isMyMessage;
+  late final bool isMyMessage;
 
   /// True if the user message is the same of the previous message
-  bool? isLastUser;
+  late final bool isLastUser;
 
   /// True if the user message is the same of the next message
-  bool? isNextUser;
+  late final bool isNextUser;
 
   /// The message
-  Message message;
+  late final Message message;
 
   /// The index of the message
-  int index;
+  late final int index;
 }
 
 /// ![screenshot](https://raw.githubusercontent.com/GetStream/stream-chat-flutter/master/screenshots/message_listview.png)
@@ -576,46 +579,21 @@ class _MessageListViewState extends State<MessageListView> {
                           const Offstage();
                     }
 
-                    final topMessageIndex = itemCount -
-                        4; // 7 -> parent // 6 -> header // 5 -> loader
                     const bottomMessageIndex = 2; // 1 -> loader // 0 -> footer
 
                     final message = messages[i - 2];
                     Widget messageWidget;
 
-                    if (i == topMessageIndex) {
+                    if (i == bottomMessageIndex) {
-                      messageWidget = _buildTopMessage(
-                        context,
-                        message,
-                        messages,
-                        streamChannel,
-                        i,
-                      );
-                    } else if (i == bottomMessageIndex) {
                       messageWidget = _buildBottomMessage(
                         context,
                         message,
                         messages,
                         streamChannel!,
-                        i,
+                        i - 2,
                       );
                     } else {
-                      if (widget.messageBuilder != null) {
+                      messageWidget = buildMessage(message, messages, i - 2);
-                        messageWidget = Builder(
-                          key: ValueKey<String>('MESSAGE-${message.id}'),
-                          builder: (context) => widget.messageBuilder!(
-                              context,
-                              MessageDetails(
-                                context,
-                                message,
-                                messages,
-                                i,
-                              ),
-                              messages),
-                        );
-                      } else {
-                        messageWidget = buildMessage(message, messages, i);
-                      }
                     }
                     return messageWidget;
                   },
@@ -785,34 +763,6 @@ class _MessageListViewState extends State<MessageListView> {
         isThreadConversation: _isThreadConversation,
       );
 
-  Widget _buildTopMessage(
-    BuildContext context,
-    Message message,
-    List<Message> messages,
-    StreamChannelState? streamChannel,
-    int index,
-  ) {
-    Widget messageWidget;
-    if (widget.messageBuilder != null) {
-      messageWidget = Builder(
-        key: const ValueKey<String>('TOP-MESSAGE'),
-        builder: (_) => widget.messageBuilder!(
-          context,
-          MessageDetails(
-            context,
-            message,
-            messages,
-            messages.length - 1,
-          ),
-          messages,
-        ),
-      );
-    } else {
-      messageWidget = buildMessage(message, messages, index);
-    }
-    return messageWidget;
-  }
-
   Widget _buildBottomMessage(
     BuildContext context,
     Message message,
@@ -820,24 +770,7 @@ class _MessageListViewState extends State<MessageListView> {
     StreamChannelState streamChannel,
     int index,
   ) {
-    Widget messageWidget;
+    final messageWidget = buildMessage(message, messages, index);
-    if (widget.messageBuilder != null) {
-      messageWidget = Builder(
-        key: ValueKey<String>('BOTTOM-MESSAGE-${message.id}'),
-        builder: (_) => widget.messageBuilder!(
-          context,
-          MessageDetails(
-            context,
-            message,
-            messages,
-            0,
-          ),
-          messages,
-        ),
-      );
-    } else {
-      messageWidget = buildMessage(message, messages, index);
-    }
 
     return VisibilityDetector(
       key: ValueKey<String>('BOTTOM-MESSAGE-${message.id}'),
@@ -1015,7 +948,7 @@ class _MessageListViewState extends State<MessageListView> {
     final currentUserMember =
         members.firstWhere((e) => e.user!.id == currentUser!.id);
 
-    Widget child = MessageWidget(
+    Widget messageWidget = MessageWidget(
       key: ValueKey<String>('MESSAGE-${message.id}'),
       message: message,
       reverse: isMyMessage,
@@ -1130,6 +1063,21 @@ class _MessageListViewState extends State<MessageListView> {
       showPinButton: widget.pinPermissions.contains(currentUserMember.role),
     );
 
+    if (widget.messageBuilder != null) {
+      messageWidget = widget.messageBuilder!(
+        context,
+        MessageDetails(
+          userId,
+          message,
+          messages,
+          index,
+          messageWidget as MessageWidget,
+        ),
+        messages,
+      );
+    }
+
+    var child = messageWidget;
     if (!message.isDeleted &&
         !message.isSystem &&
         !message.isEphemeral &&

packages/stream_chat_flutter/lib/src/message_widget.dart

@@ -572,7 +572,7 @@ class _MessageWidgetState extends State<MessageWidget>
     super.build(context);
     final avatarWidth =
         widget.messageTheme.avatarTheme?.constraints.maxWidth ?? 40;
-    final leftPadding =
+    final bottomRowPadding =
         widget.showUserAvatar != DisplayWidget.gone ? avatarWidth + 8.5 : 0.5;
 
     return Material(
@@ -627,7 +627,8 @@ class _MessageWidgetState extends State<MessageWidget>
                               crossAxisAlignment: CrossAxisAlignment.end,
                               mainAxisSize: MainAxisSize.min,
                               children: <Widget>[
-                                if (widget.showUserAvatar ==
+                                if (!widget.reverse &&
+                                    widget.showUserAvatar ==
                                         DisplayWidget.show &&
                                     widget.message.user != null) ...[
                                   _buildUserAvatar(),
@@ -753,6 +754,13 @@ class _MessageWidgetState extends State<MessageWidget>
                                     ),
                                   ),
                                 ),
+                                if (widget.reverse &&
+                                    widget.showUserAvatar ==
+                                        DisplayWidget.show &&
+                                    widget.message.user != null) ...[
+                                  _buildUserAvatar(),
+                                  const SizedBox(width: 4),
+                                ]
                               ],
                             ),
                             if (showBottomRow)
@@ -763,7 +771,8 @@ class _MessageWidgetState extends State<MessageWidget>
                       if (showBottomRow)
                         Padding(
                           padding: EdgeInsets.only(
-                            left: leftPadding,
+                            left: !widget.reverse ? bottomRowPadding : 0,
+                            right: widget.reverse ? bottomRowPadding : 0,
                             bottom:
                                 isPinned && widget.showPinHighlight ? 6.0 : 0.0,
                           ),