feat(ui): sending indicator in BottomRow

packages/stream_chat_flutter/CHANGELOG.md

@@ -5,6 +5,7 @@
 - Updated `lottie` dependency to `^2.0.0`
 - Updated `desktop_drop` dependency to `^0.4.0`
 - Updated `connectivity_plus` dependency to `^3.0.2`
+- Added third parameter (default `BottomRow` widget with `copyWith` method available) to `bottomRowBuilder` of `StreamMessageWidget` to allow easier customization.
 
 🐞 Fixed
 - [[#1379]](https://github.com/GetStream/stream-chat-flutter/issues/1379) Fixed "Issues with photo attachments on web", where the cached image attachment would not render while uploading.

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

@@ -32,6 +32,7 @@ class BottomRow extends StatelessWidget {
     this.deletedBottomRowBuilder,
     this.onThreadTap,
     this.usernameBuilder,
+    this.sendingIndicatorBuilder,
   });
 
   /// {@macro messageIsDeleted}
@@ -88,6 +89,61 @@ class BottomRow extends StatelessWidget {
   /// {@macro usernameBuilder}
   final Widget Function(BuildContext, Message)? usernameBuilder;
 
+  /// {@macro sendingIndicatorBuilder}
+  final Widget Function(BuildContext, Message)? sendingIndicatorBuilder;
+
+  /// {@template copyWith}
+  /// Creates a copy of [BottomRow] with specified attributes
+  /// overridden.
+  /// {@endtemplate}
+  BottomRow copyWith({
+    Key? key,
+    bool? isDeleted,
+    Message? message,
+    bool? showThreadReplyIndicator,
+    bool? showInChannel,
+    bool? showTimeStamp,
+    bool? showUsername,
+    bool? reverse,
+    bool? showSendingIndicator,
+    bool? hasUrlAttachments,
+    bool? isGiphy,
+    bool? isOnlyEmoji,
+    StreamMessageThemeData? messageTheme,
+    StreamChatThemeData? streamChatTheme,
+    bool? hasNonUrlAttachments,
+    StreamChatState? streamChat,
+    Widget Function(BuildContext, Message)? deletedBottomRowBuilder,
+    void Function(Message)? onThreadTap,
+    Widget Function(BuildContext, Message)? usernameBuilder,
+    Widget Function(BuildContext, Message)? sendingIndicatorBuilder,
+  }) =>
+      BottomRow(
+        key: key ?? this.key,
+        isDeleted: isDeleted ?? this.isDeleted,
+        message: message ?? this.message,
+        showThreadReplyIndicator:
+            showThreadReplyIndicator ?? this.showThreadReplyIndicator,
+        showInChannel: showInChannel ?? this.showInChannel,
+        showTimeStamp: showTimeStamp ?? this.showTimeStamp,
+        showUsername: showUsername ?? this.showUsername,
+        reverse: reverse ?? this.reverse,
+        showSendingIndicator: showSendingIndicator ?? this.showSendingIndicator,
+        hasUrlAttachments: hasUrlAttachments ?? this.hasUrlAttachments,
+        isGiphy: isGiphy ?? this.isGiphy,
+        isOnlyEmoji: isOnlyEmoji ?? this.isOnlyEmoji,
+        messageTheme: messageTheme ?? this.messageTheme,
+        streamChatTheme: streamChatTheme ?? this.streamChatTheme,
+        hasNonUrlAttachments: hasNonUrlAttachments ?? this.hasNonUrlAttachments,
+        streamChat: streamChat ?? this.streamChat,
+        deletedBottomRowBuilder:
+            deletedBottomRowBuilder ?? this.deletedBottomRowBuilder,
+        onThreadTap: onThreadTap ?? this.onThreadTap,
+        usernameBuilder: usernameBuilder ?? this.usernameBuilder,
+        sendingIndicatorBuilder:
+            sendingIndicatorBuilder ?? this.sendingIndicatorBuilder,
+      );
+
   @override
   Widget build(BuildContext context) {
     if (isDeleted) {
@@ -147,13 +203,14 @@ class BottomRow extends StatelessWidget {
         ),
       if (showSendingIndicator)
         WidgetSpan(
-          child: SendingIndicatorWrapper(
+          child: sendingIndicatorBuilder?.call(context, message) ??
-            messageTheme: messageTheme,
+              SendingIndicatorWrapper(
-            message: message,
+                messageTheme: messageTheme,
-            hasNonUrlAttachments: hasNonUrlAttachments,
+                message: message,
-            streamChat: streamChat,
+                hasNonUrlAttachments: hasNonUrlAttachments,
-            streamChatTheme: streamChatTheme,
+                streamChat: streamChat,
-          ),
+                streamChatTheme: streamChatTheme,
+              ),
         ),
     ]);
 

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

@@ -8,6 +8,7 @@ import 'package:stream_chat_flutter/src/context_menu_items/context_menu_reaction
 import 'package:stream_chat_flutter/src/context_menu_items/stream_chat_context_menu_item.dart';
 import 'package:stream_chat_flutter/src/dialogs/dialogs.dart';
 import 'package:stream_chat_flutter/src/message_actions_modal/message_actions_modal.dart';
+import 'package:stream_chat_flutter/src/message_widget/bottom_row.dart';
 import 'package:stream_chat_flutter/src/message_widget/message_widget_content.dart';
 import 'package:stream_chat_flutter/src/message_widget/reactions/message_reactions_modal.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
@@ -306,7 +307,7 @@ class StreamMessageWidget extends StatefulWidget {
   /// {@template bottomRowBuilder}
   /// Widget builder for building a bottom row below the message
   /// {@endtemplate}
-  final Widget Function(BuildContext, Message)? bottomRowBuilder;
+  final Widget Function(BuildContext, Message, BottomRow)? bottomRowBuilder;
 
   /// {@template deletedBottomRowBuilder}
   /// Widget builder for building a bottom row below a deleted message
@@ -538,7 +539,7 @@ class StreamMessageWidget extends StatefulWidget {
     Widget Function(BuildContext, Message)? editMessageInputBuilder,
     Widget Function(BuildContext, Message)? textBuilder,
     Widget Function(BuildContext, Message)? usernameBuilder,
-    Widget Function(BuildContext, Message)? bottomRowBuilder,
+    Widget Function(BuildContext, Message, BottomRow)? bottomRowBuilder,
     Widget Function(BuildContext, Message)? deletedBottomRowBuilder,
     void Function(BuildContext, Message)? onMessageActions,
     Message? message,

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

@@ -152,7 +152,7 @@ class MessageWidgetContent extends StatelessWidget {
   final double bottomRowPadding;
 
   /// {@macro bottomRowBuilder}
-  final Widget Function(BuildContext, Message)? bottomRowBuilder;
+  final Widget Function(BuildContext, Message, BottomRow)? bottomRowBuilder;
 
   /// {@macro showInChannelIndicator}
   final bool showInChannel;
@@ -207,30 +207,7 @@ class MessageWidgetContent extends StatelessWidget {
                   right: reverse ? bottomRowPadding : 0,
                   bottom: isPinned && showPinHighlight ? 6.0 : 0.0,
                 ),
-                child: bottomRowBuilder?.call(
+                child: _buildBottomRow(context),
-                      context,
-                      message,
-                    ) ??
-                    BottomRow(
-                      message: message,
-                      reverse: reverse,
-                      messageTheme: messageTheme,
-                      hasUrlAttachments: hasUrlAttachments,
-                      isOnlyEmoji: isOnlyEmoji,
-                      isDeleted: message.isDeleted,
-                      isGiphy: isGiphy,
-                      showInChannel: showInChannel,
-                      showSendingIndicator: showSendingIndicator,
-                      showThreadReplyIndicator: showThreadReplyIndicator,
-                      showTimeStamp: showTimeStamp,
-                      showUsername: showUsername,
-                      streamChatTheme: streamChatTheme,
-                      onThreadTap: onThreadTap,
-                      deletedBottomRowBuilder: deletedBottomRowBuilder,
-                      streamChat: streamChat,
-                      hasNonUrlAttachments: hasNonUrlAttachments,
-                      usernameBuilder: usernameBuilder,
-                    ),
               ),
             Padding(
               padding: EdgeInsets.only(
@@ -457,4 +434,30 @@ class MessageWidgetContent extends StatelessWidget {
       ),
     );
   }
+
+  Widget _buildBottomRow(BuildContext context) {
+    final defaultWidget = BottomRow(
+      message: message,
+      reverse: reverse,
+      messageTheme: messageTheme,
+      hasUrlAttachments: hasUrlAttachments,
+      isOnlyEmoji: isOnlyEmoji,
+      isDeleted: message.isDeleted,
+      isGiphy: isGiphy,
+      showInChannel: showInChannel,
+      showSendingIndicator: showSendingIndicator,
+      showThreadReplyIndicator: showThreadReplyIndicator,
+      showTimeStamp: showTimeStamp,
+      showUsername: showUsername,
+      streamChatTheme: streamChatTheme,
+      onThreadTap: onThreadTap,
+      deletedBottomRowBuilder: deletedBottomRowBuilder,
+      streamChat: streamChat,
+      hasNonUrlAttachments: hasNonUrlAttachments,
+      usernameBuilder: usernameBuilder,
+    );
+
+    return bottomRowBuilder?.call(context, message, defaultWidget) ??
+        defaultWidget;
+  }
 }