feat(ui): Add reactionIndicatorBuilder for custom reaction indicators

This commit introduces a `reactionIndicatorBuilder` to `StreamMessageWidget`, allowing developers to customize the appearance of reaction indicators. A primary use case is displaying reaction counts next to emojis, similar to the web/desktop experience.

Key changes:
- Added `reactionIndicatorBuilder` to `StreamMessageWidget` for building custom reaction indicators.
- Added `reactionIconBuilder` to `StreamReactionIndicator` to allow customization of individual reaction icons within the indicator, such as adding a count.
- Refactored `ReactionPickerIconList` to be more generic by removing the `message` dependency and renaming `onReactionPicked` to `onIconPicked`.
- Added tests for the new `StreamReactionIndicator` and `ReactionIndicatorIconList` widgets.

Author: xsahil03x

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

@@ -100,6 +100,7 @@ class StreamMessageWidget extends StatefulWidget {
     this.imageAttachmentThumbnailCropType = 'center',
     this.attachmentActionsModalBuilder,
     this.reactionPickerBuilder = StreamReactionPicker.builder,
+    this.reactionIndicatorBuilder = StreamReactionIndicator.builder,
   });
 
   /// {@template onMentionTap}
@@ -386,6 +387,9 @@ class StreamMessageWidget extends StatefulWidget {
   /// {@macro reactionPickerBuilder}
   final ReactionPickerBuilder reactionPickerBuilder;
 
+  /// {@macro reactionIndicatorBuilder}
+  final ReactionIndicatorBuilder reactionIndicatorBuilder;
+
   /// Size of the image attachment thumbnail.
   final Size imageAttachmentThumbnailSize;
 
@@ -469,6 +473,7 @@ class StreamMessageWidget extends StatefulWidget {
     String? imageAttachmentThumbnailCropType,
     AttachmentActionsBuilder? attachmentActionsModalBuilder,
     ReactionPickerBuilder? reactionPickerBuilder,
+    ReactionIndicatorBuilder? reactionIndicatorBuilder,
   }) {
     return StreamMessageWidget(
       key: key ?? this.key,
@@ -545,6 +550,8 @@ class StreamMessageWidget extends StatefulWidget {
           attachmentActionsModalBuilder ?? this.attachmentActionsModalBuilder,
       reactionPickerBuilder:
           reactionPickerBuilder ?? this.reactionPickerBuilder,
+      reactionIndicatorBuilder:
+          reactionIndicatorBuilder ?? this.reactionIndicatorBuilder,
     );
   }
 
@@ -770,6 +777,7 @@ class _StreamMessageWidgetState extends State<StreamMessageWidget>
                     widget.bottomRowBuilderWithDefaultWidget,
                 onUserAvatarTap: widget.onUserAvatarTap,
                 userAvatarBuilder: widget.userAvatarBuilder,
+                reactionIndicatorBuilder: widget.reactionIndicatorBuilder,
               ),
             ),
           ),

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

@@ -63,6 +63,7 @@ class MessageWidgetContent extends StatelessWidget {
     required this.showEditedLabel,
     required this.messageWidget,
     required this.onThreadTap,
+    required this.reactionIndicatorBuilder,
     this.onUserAvatarTap,
     this.borderRadiusGeometry,
     this.borderSide,
@@ -224,6 +225,9 @@ class MessageWidgetContent extends StatelessWidget {
   /// {@macro userAvatarBuilder}
   final Widget Function(BuildContext, User)? userAvatarBuilder;
 
+  /// {@macro reactionIndicatorBuilder}
+  final ReactionIndicatorBuilder reactionIndicatorBuilder;
+
   @override
   Widget build(BuildContext context) {
     return Column(
@@ -273,6 +277,7 @@ class MessageWidgetContent extends StatelessWidget {
                             onTap: onReactionsTap,
                             visible: isMobileDevice && showReactions,
                             anchorOffset: const Offset(0, 36),
+                            reactionIndicatorBuilder: reactionIndicatorBuilder,
                             childSizeDelta: switch (showUserAvatar) {
                               DisplayWidget.gone => Offset.zero,
                               // Size adjustment for the user avatar

packages/stream_chat_flutter/lib/src/reactions/indicator/reaction_indicator.dart

@@ -1,8 +1,25 @@
 import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
-import 'package:stream_chat_flutter/src/reactions/indicator/reaction_indicator_icon_list.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
+/// {@template reactionIndicatorBuilder}
+/// Signature for a function that builds a custom reaction indicator widget.
+///
+/// This allows users to customize how reactions are displayed on messages,
+/// including showing reaction counts alongside emojis.
+///
+/// Parameters:
+/// - [context]: The build context.
+/// - [message]: The message containing the reactions to display.
+/// - [onTap]: An optional callback triggered when the reaction indicator
+///   is tapped.
+/// {@endtemplate}
+typedef ReactionIndicatorBuilder = Widget Function(
+  BuildContext context,
+  Message message,
+  VoidCallback? onTap,
+);
+
 /// {@template streamReactionIndicator}
 /// A widget that displays a horizontal list of reaction icons that users have
 /// reacted with on a message.
@@ -17,33 +34,71 @@ class StreamReactionIndicator extends StatelessWidget {
     super.key,
     this.onTap,
     required this.message,
+    required this.reactionIcons,
+    this.reactionIconBuilder,
     this.backgroundColor,
     this.padding = const EdgeInsets.all(8),
     this.scrollable = true,
     this.borderRadius = const BorderRadius.all(Radius.circular(26)),
     this.reactionSorting = ReactionSorting.byFirstReactionAt,
   });
 
-  /// Message to attach the reaction to.
-  final Message message;
+  /// Creates a [StreamReactionIndicator] using the default reaction icons
+  /// provided by the [StreamChatConfiguration].
+  ///
+  /// This is the recommended way to create a reaction indicator
+  /// as it ensures that the icons are consistent with the rest of the app.
+  ///
+  /// The [onTap] callback is optional and can be used to handle
+  /// when the reaction indicator is tapped.
+  factory StreamReactionIndicator.builder(
+    BuildContext context,
+    Message message,
+    VoidCallback? onTap,
+  ) {
+    final config = StreamChatConfiguration.of(context);
+    final reactionIcons = config.reactionIcons;
+
+    final currentUser = StreamChat.maybeOf(context)?.currentUser;
+    final isMyMessage = message.user?.id == currentUser?.id;
+
+    final theme = StreamChatTheme.of(context);
+    final messageTheme = theme.getMessageTheme(reverse: isMyMessage);
+
+    return StreamReactionIndicator(
+      onTap: onTap,
+      message: message,
+      reactionIcons: reactionIcons,
+      backgroundColor: messageTheme.reactionsBackgroundColor,
+    );
+  }
 
   /// Callback triggered when the reaction indicator is tapped.
   final VoidCallback? onTap;
 
+  /// Message to attach the reaction to.
+  final Message message;
+
+  /// The list of available reaction icons.
+  final List<StreamReactionIcon> reactionIcons;
+
+  /// Optional custom builder for reaction indicator icons.
+  final ReactionIndicatorIconBuilder? reactionIconBuilder;
+
   /// Background color for the reaction indicator.
   final Color? backgroundColor;
 
-  /// Padding around the reaction picker.
+  /// Padding around the reaction indicator.
   ///
   /// Defaults to `EdgeInsets.all(8)`.
   final EdgeInsets padding;
 
-  /// Whether the reaction picker should be scrollable.
+  /// Whether the reaction indicator should be scrollable.
   ///
   /// Defaults to `true`.
   final bool scrollable;
 
-  /// Border radius for the reaction picker.
+  /// Border radius for the reaction indicator.
   ///
   /// Defaults to a circular border with a radius of 26.
   final BorderRadius? borderRadius;
@@ -56,35 +111,40 @@ class StreamReactionIndicator extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final theme = StreamChatTheme.of(context);
-    final config = StreamChatConfiguration.of(context);
-    final reactionIcons = config.reactionIcons;
 
     final ownReactions = {...?message.ownReactions?.map((it) => it.type)};
-    final indicatorIcons = message.reactionGroups?.entries
-        .sortedByCompare((it) => it.value, reactionSorting)
-        .map((group) {
-      final reactionIcon = reactionIcons.firstWhere(
-        (it) => it.type == group.key,
-        orElse: () => const StreamReactionIcon.unknown(),
-      );
-
-      return ReactionIndicatorIcon(
-        type: reactionIcon.type,
-        builder: reactionIcon.builder,
-        isSelected: ownReactions.contains(reactionIcon.type),
-      );
-    });
+    final reactionIcons = {for (final it in this.reactionIcons) it.type: it};
+
+    final sortedReactionGroups = message.reactionGroups?.entries
+        .sortedByCompare((it) => it.value, reactionSorting);
+
+    final indicatorIcons = sortedReactionGroups?.map(
+      (group) {
+        final reactionType = group.key;
+        final reactionIcon = switch (reactionIcons[reactionType]) {
+          final icon? => icon,
+          _ => const StreamReactionIcon.unknown(),
+        };
+
+        return ReactionIndicatorIcon(
+          type: reactionType,
+          builder: reactionIcon.builder,
+          isSelected: ownReactions.contains(reactionType),
+        );
+      },
+    );
+
+    final reactionIndicator = ReactionIndicatorIconList(
+      iconBuilder: reactionIconBuilder,
+      indicatorIcons: [...?indicatorIcons],
+    );
 
     final isSingleIndicatorIcon = indicatorIcons?.length == 1;
     final extraPadding = switch (isSingleIndicatorIcon) {
       true => EdgeInsets.zero,
       false => const EdgeInsets.symmetric(horizontal: 4),
     };
 
-    final indicator = ReactionIndicatorIconList(
-      indicatorIcons: [...?indicatorIcons],
-    );
-
     return Material(
       borderRadius: borderRadius,
       clipBehavior: Clip.antiAlias,
@@ -94,11 +154,11 @@ class StreamReactionIndicator extends StatelessWidget {
         child: Padding(
           padding: padding.add(extraPadding),
           child: switch (scrollable) {
+            false => reactionIndicator,
             true => SingleChildScrollView(
                 scrollDirection: Axis.horizontal,
-                child: indicator,
+                child: reactionIndicator,
               ),
-            false => indicator,
           },
         ),
       ),

packages/stream_chat_flutter/lib/src/reactions/indicator/reaction_indicator_bubble_overlay.dart

@@ -22,6 +22,7 @@ class ReactionIndicatorBubbleOverlay extends StatelessWidget {
     this.reverse = false,
     this.anchorOffset = Offset.zero,
     this.childSizeDelta = Offset.zero,
+    this.reactionIndicatorBuilder = StreamReactionIndicator.builder,
   });
 
   /// Whether the overlay should be visible.
@@ -45,6 +46,9 @@ class ReactionIndicatorBubbleOverlay extends StatelessWidget {
   /// The additional size delta to apply to the child widget for positioning.
   final Offset childSizeDelta;
 
+  /// Builder for the reaction indicator widget.
+  final ReactionIndicatorBuilder reactionIndicatorBuilder;
+
   @override
   Widget build(BuildContext context) {
     final theme = StreamChatTheme.of(context);
@@ -63,11 +67,7 @@ class ReactionIndicatorBubbleOverlay extends StatelessWidget {
         follower: AlignmentDirectional.bottomCenter,
         target: AlignmentDirectional(reverse ? -1 : 1, -1),
       ),
-      reaction: StreamReactionIndicator(
-        onTap: onTap,
-        message: message,
-        backgroundColor: messageTheme.reactionsBackgroundColor,
-      ),
+      reaction: reactionIndicatorBuilder.call(context, message, onTap),
       child: child,
     );
   }

packages/stream_chat_flutter/lib/src/reactions/indicator/reaction_indicator_icon_list.dart

@@ -20,7 +20,7 @@ typedef ReactionIndicatorIconBuilder = Widget Function(
 /// A widget that displays a list of reactionIcons that users have reacted with
 /// on a message.
 ///
-/// also see:
+/// See also:
 /// - [StreamReactionIndicator], which is a higher-level widget that uses this
 ///   widget to display a reaction indicator in a modal or inline.
 /// {@endtemplate}
@@ -29,8 +29,8 @@ class ReactionIndicatorIconList extends StatelessWidget {
   const ReactionIndicatorIconList({
     super.key,
     required this.indicatorIcons,
-    this.iconBuilder = _defaultIconBuilder,
-  });
+    ReactionIndicatorIconBuilder? iconBuilder,
+  }) : iconBuilder = iconBuilder ?? _defaultIconBuilder;
 
   /// The list of available reaction indicator icons.
   final List<ReactionIndicatorIcon> indicatorIcons;

packages/stream_chat_flutter/lib/src/reactions/picker/reaction_picker.dart

@@ -1,6 +1,11 @@
 import 'package:flutter/material.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
+/// {@template onReactionPicked}
+/// Callback called when a reaction is picked.
+/// {@endtemplate}
+typedef OnReactionPicked = ValueSetter<Reaction>;
+
 /// {@template reactionPickerBuilder}
 /// Function signature for building a custom reaction picker widget.
 ///
@@ -33,9 +38,11 @@ class StreamReactionPicker extends StatelessWidget {
   /// {@macro streamReactionPicker}
   const StreamReactionPicker({
     super.key,
+    this.onReactionPicked,
     required this.message,
     required this.reactionIcons,
-    this.onReactionPicked,
+    this.reactionIconBuilder,
+    this.backgroundColor,
     this.padding = const EdgeInsets.all(4),
     this.scrollable = true,
     this.borderRadius = const BorderRadius.all(Radius.circular(24)),
@@ -83,6 +90,12 @@ class StreamReactionPicker extends StatelessWidget {
   /// {@macro onReactionPressed}
   final OnReactionPicked? onReactionPicked;
 
+  /// Optional custom builder for reaction picker icons.
+  final ReactionPickerIconBuilder? reactionIconBuilder;
+
+  /// Background color for the reaction picker.
+  final Color? backgroundColor;
+
   /// Padding around the reaction picker.
   ///
   /// Defaults to `EdgeInsets.all(4)`.
@@ -102,10 +115,31 @@ class StreamReactionPicker extends StatelessWidget {
   Widget build(BuildContext context) {
     final theme = StreamChatTheme.of(context);
 
+    final ownReactions = [...?message.ownReactions];
+    final ownReactionsMap = {for (final it in ownReactions) it.type: it};
+
+    final indicatorIcons = reactionIcons.map(
+      (reactionIcon) {
+        final reactionType = reactionIcon.type;
+
+        return ReactionPickerIcon(
+          type: reactionType,
+          builder: reactionIcon.builder,
+          // If the reaction is present in ownReactions, it is selected.
+          isSelected: ownReactionsMap[reactionType] != null,
+        );
+      },
+    );
+
     final reactionPicker = ReactionPickerIconList(
-      message: message,
-      reactionIcons: reactionIcons,
-      onReactionPicked: onReactionPicked,
+      iconBuilder: reactionIconBuilder,
+      reactionIcons: [...indicatorIcons],
+      onIconPicked: (reactionIcon) {
+        final reactionType = reactionIcon.type;
+        final reaction = ownReactionsMap[reactionType];
+
+        return onReactionPicked?.call(reaction ?? Reaction(type: reactionType));
+      },
     );
 
     final isSinglePickerIcon = reactionIcons.length == 1;
@@ -117,7 +151,7 @@ class StreamReactionPicker extends StatelessWidget {
     return Material(
       borderRadius: borderRadius,
       clipBehavior: Clip.antiAlias,
-      color: theme.colorTheme.barsBg,
+      color: backgroundColor ?? theme.colorTheme.barsBg,
       child: Padding(
         padding: padding.add(extraPadding),
         child: switch (scrollable) {

packages/stream_chat_flutter/lib/src/reactions/picker/reaction_picker_bubble_overlay.dart

@@ -1,6 +1,5 @@
 import 'package:flutter/material.dart';
 import 'package:stream_chat_flutter/src/reactions/picker/reaction_picker.dart';
-import 'package:stream_chat_flutter/src/reactions/picker/reaction_picker_icon_list.dart';
 import 'package:stream_chat_flutter/src/reactions/reaction_bubble_overlay.dart';
 import 'package:stream_chat_flutter/src/theme/stream_chat_theme.dart';
 import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';