performance fixes

packages/stream_chat/lib/src/api/channel.dart

@@ -1709,7 +1709,7 @@ class ChannelClientState {
   final BehaviorSubject<int> _unreadCountController = BehaviorSubject.seeded(0);
 
   /// Unread count getter as a stream
-  Stream<int> get unreadCountStream => _unreadCountController.stream;
+  Stream<int> get unreadCountStream => _unreadCountController.stream.distinct();
 
   /// Unread count getter
   int? get unreadCount => _unreadCountController.value;

packages/stream_chat/lib/src/client.dart

@@ -1532,13 +1532,15 @@ class ClientState {
   int? get unreadChannels => _unreadChannelsController.valueOrNull;
 
   /// The current unread channels count as a stream
-  Stream<int?> get unreadChannelsStream => _unreadChannelsController.stream;
+  Stream<int?> get unreadChannelsStream =>
+      _unreadChannelsController.stream.distinct();
 
   /// The current total unread messages count
   int? get totalUnreadCount => _totalUnreadCountController.valueOrNull;
 
   /// The current total unread messages count as a stream
-  Stream<int?> get totalUnreadCountStream => _totalUnreadCountController.stream;
+  Stream<int?> get totalUnreadCountStream =>
+      _totalUnreadCountController.stream.distinct();
 
   /// The current list of channels in memory as a stream
   Stream<Map<String?, Channel>?> get channelsStream =>

packages/stream_chat_flutter/analysis_options.yaml

@@ -3,10 +3,10 @@ analyzer:
     - extension-methods
   exclude:
     - lib/**/*.g.dart
-#    - example/**
+    - example/**
     - lib/src/emoji
     - lib/**/*.freezed.dart
-#    - test/**
+    - test/**
 
 linter:
   rules:

packages/stream_chat_flutter/lib/src/attachment/file_attachment.dart

@@ -3,10 +3,10 @@ import 'package:flutter/material.dart';
 import 'package:shimmer/shimmer.dart';
 import 'package:stream_chat_flutter/src/stream_chat_theme.dart';
 import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
+import 'package:stream_chat_flutter/src/upload_progress_indicator.dart';
 import 'package:stream_chat_flutter/src/utils.dart';
 import 'package:stream_chat_flutter/src/video_thumbnail_image.dart';
 import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';
-import 'package:stream_chat_flutter/src/upload_progress_indicator.dart';
 
 // ignore: always_use_package_imports
 import 'attachment_widget.dart';
@@ -103,7 +103,7 @@ class FileAttachment extends AttachmentWidget {
   Widget _getFileTypeImage(BuildContext context) {
     if (isImageAttachment) {
       return Material(
-        clipBehavior: Clip.antiAlias,
+        clipBehavior: Clip.hardEdge,
         type: MaterialType.transparency,
         shape: _getDefaultShape(context),
         child: source.when(
@@ -154,7 +154,7 @@ class FileAttachment extends AttachmentWidget {
 
     if (isVideoAttachment) {
       return Material(
-        clipBehavior: Clip.antiAlias,
+        clipBehavior: Clip.hardEdge,
         type: MaterialType.transparency,
         shape: _getDefaultShape(context),
         child: source.when(

packages/stream_chat_flutter/lib/src/attachment/giphy_attachment.dart

@@ -53,7 +53,7 @@ class GiphyAttachment extends AttachmentWidget {
         Card(
           color: StreamChatTheme.of(context).colorTheme.white,
           elevation: 2,
-          clipBehavior: Clip.antiAlias,
+          clipBehavior: Clip.hardEdge,
           shape: const RoundedRectangleBorder(
             borderRadius: BorderRadius.only(
               topRight: Radius.circular(16),

packages/stream_chat_flutter/lib/src/attachment/image_attachment.dart

@@ -74,16 +74,16 @@ class ImageAttachment extends AttachmentWidget {
           if (imageUri.host == 'stream-io-cdn.com') {
             imageUri = imageUri.replace(queryParameters: {
               ...imageUri.queryParameters,
-              'h': '500',
+              'h': '400',
-              'w': '500',
+              'w': '400',
               'crop': 'center',
               'resize': 'crop',
             });
           } else if (imageUri.host == 'stream-cloud-uploads.imgix.net') {
             imageUri = imageUri.replace(queryParameters: {
               ...imageUri.queryParameters,
-              'height': '500',
+              'height': '400',
-              'width': '500',
+              'width': '400',
               'fit': 'crop',
             });
           }
@@ -92,10 +92,10 @@ class ImageAttachment extends AttachmentWidget {
           return _buildImageAttachment(
             context,
             CachedNetworkImage(
-              cacheKey: imageUri.path,
+              cacheKey: imageUrl,
               height: size?.height,
               width: size?.width,
-              placeholder: (_, __) {
+              placeholder: (context, __) {
                 final image = Image.asset(
                   'images/placeholder.png',
                   fit: BoxFit.cover,

packages/stream_chat_flutter/lib/src/channel_header.dart

@@ -133,8 +133,7 @@ class ChannelHeader extends StatelessWidget implements PreferredSizeWidget {
         }
 
         return InfoTile(
-          // ignore: avoid_bool_literals_in_conditional_expressions
+          showMessage: showConnectionStateTile && showStatus,
-          showMessage: showConnectionStateTile ? showStatus : false,
           message: statusString,
           child: AppBar(
             textTheme: Theme.of(context).textTheme,

packages/stream_chat_flutter/lib/src/channel_image.dart

@@ -94,15 +94,17 @@ class ChannelImage extends StatelessWidget {
         } else if (channel.state?.members.length == 2) {
           final otherMember = channel.state?.members
               .firstWhere((member) => member.user?.id != streamChat.user?.id);
-          return StreamBuilder<User>(
+          return BetterStreamBuilder<User?>(
-              stream: streamChat.client.state.usersStream.map(
+              stream: streamChat.client.state.usersStream
-                  (users) => users[otherMember?.userId] ?? otherMember!.user!),
+                  .map((users) =>
+                      users[otherMember?.userId] ?? otherMember!.user!)
+                  .distinct(),
               initialData: otherMember!.user,
               builder: (context, snapshot) => UserAvatar(
                     borderRadius: borderRadius ??
                         chatThemeData
                             .channelPreviewTheme.avatarTheme?.borderRadius,
-                    user: snapshot.data ?? otherMember.user!,
+                    user: snapshot ?? otherMember.user!,
                     constraints: constraints ??
                         chatThemeData
                             .channelPreviewTheme.avatarTheme?.constraints,

packages/stream_chat_flutter/lib/src/channel_list_view.dart

@@ -1,11 +1,10 @@
-import 'package:collection/collection.dart' show IterableExtension;
+import 'package:collection/collection.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_slidable/flutter_slidable.dart';
 import 'package:shimmer/shimmer.dart';
 import 'package:stream_chat_flutter/src/channel_bottom_sheet.dart';
 import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
-import 'package:stream_chat_flutter/src/utils.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';
 
@@ -245,10 +244,7 @@ class _ChannelListViewState extends State<ChannelListView> {
       }
     }
 
-    return AnimatedSwitcher(
+    return child;
-      duration: const Duration(milliseconds: 500),
-      child: child,
-    );
   }
 
   Widget _buildEmptyWidget(BuildContext context) => LayoutBuilder(
@@ -473,97 +469,97 @@ class _ChannelListViewState extends State<ChannelListView> {
       final channel = channels[i];
 
       return StreamChannel(
-        key: ValueKey<String>('CHANNEL-${channel.id}'),
+        key: ValueKey<String>('CHANNEL-${channel.cid}'),
         channel: channel,
-        child: Builder(
+        child: Slidable(
-          builder: (context) => Slidable(
+          controller: _slideController,
-            controller: _slideController,
+          enabled: widget.swipeToAction,
-            enabled: widget.swipeToAction,
+          actionPane: const SlidableBehindActionPane(),
-            actionPane: const SlidableBehindActionPane(),
+          actionExtentRatio: 0.12,
-            actionExtentRatio: 0.12,
+          secondaryActions: widget.swipeActions
-            secondaryActions: widget.swipeActions
+                  ?.map((e) => IconSlideAction(
-                    ?.map((e) => IconSlideAction(
+                        color: e.color,
-                          color: e.color,
+                        iconWidget: e.iconWidget,
-                          iconWidget: e.iconWidget,
+                        onTap: () {
-                          onTap: () {
+                          e.onTap?.call(channel);
-                            e.onTap?.call(channel);
+                        },
-                          },
+                      ))
-                        ))
+                  .toList() ??
-                    .toList() ??
+              <Widget>[
-                <Widget>[
+                IconSlideAction(
+                  color: backgroundColor,
+                  icon: Icons.more_horiz,
+                  onTap: widget.onMoreDetailsPressed != null
+                      ? () {
+                          widget.onMoreDetailsPressed!(channel);
+                        }
+                      : () {
+                          showModalBottomSheet(
+                            clipBehavior: Clip.hardEdge,
+                            shape: const RoundedRectangleBorder(
+                              borderRadius: BorderRadius.only(
+                                topLeft: Radius.circular(32),
+                                topRight: Radius.circular(32),
+                              ),
+                            ),
+                            context: context,
+                            builder: (context) => StreamChannel(
+                              channel: channel,
+                              child: ChannelBottomSheet(
+                                onViewInfoTap: () {
+                                  widget.onViewInfoTap?.call(channel);
+                                },
+                              ),
+                            ),
+                          );
+                        },
+                ),
+                if ([
+                  'admin',
+                  'owner',
+                ].contains(channel.state!.members
+                    .firstWhereOrNull(
+                        (m) => m.userId == channel.client.state.user?.id)
+                    ?.role))
                   IconSlideAction(
                     color: backgroundColor,
-                    icon: Icons.more_horiz,
+                    iconWidget: StreamSvgIcon.delete(
-                    onTap: widget.onMoreDetailsPressed != null
+                      color: chatThemeData.colorTheme.accentRed,
+                    ),
+                    onTap: widget.onDeletePressed != null
                         ? () {
-                            widget.onMoreDetailsPressed!(channel);
+                            widget.onDeletePressed!(channel);
                           }
-                        : () {
+                        : () async {
-                            showModalBottomSheet(
+                            final res = await showConfirmationDialog(
-                              clipBehavior: Clip.hardEdge,
+                              context,
-                              shape: const RoundedRectangleBorder(
+                              title: 'Delete Conversation',
-                                borderRadius: BorderRadius.only(
+                              okText: 'DELETE',
-                                  topLeft: Radius.circular(32),
+                              question:
-                                  topRight: Radius.circular(32),
+                                  // ignore: lines_longer_than_80_chars
-                                ),
+                                  'Are you sure you want to delete this conversation?',
-                              ),
+                              cancelText: 'CANCEL',
-                              context: context,
+                              icon: StreamSvgIcon.delete(
-                              builder: (context) => StreamChannel(
+                                color: chatThemeData.colorTheme.accentRed,
-                                channel: channel,
-                                child: ChannelBottomSheet(
-                                  onViewInfoTap: () {
-                                    widget.onViewInfoTap?.call(channel);
-                                  },
-                                ),
                               ),
                             );
+                            if (res == true) {
+                              await channel.delete();
+                            }
                           },
                   ),
-                  if ([
+              ],
-                    'admin',
+          child: DecoratedBox(
-                    'owner',
+            decoration: BoxDecoration(
-                  ].contains(channel.state!.members
-                      .firstWhereOrNull(
-                          (m) => m.userId == channel.client.state.user?.id)
-                      ?.role))
-                    IconSlideAction(
-                      color: backgroundColor,
-                      iconWidget: StreamSvgIcon.delete(
-                        color: chatThemeData.colorTheme.accentRed,
-                      ),
-                      onTap: widget.onDeletePressed != null
-                          ? () {
-                              widget.onDeletePressed!(channel);
-                            }
-                          : () async {
-                              final res = await showConfirmationDialog(
-                                context,
-                                title: 'Delete Conversation',
-                                okText: 'DELETE',
-                                question:
-                                    // ignore: lines_longer_than_80_chars
-                                    'Are you sure you want to delete this conversation?',
-                                cancelText: 'CANCEL',
-                                icon: StreamSvgIcon.delete(
-                                  color: chatThemeData.colorTheme.accentRed,
-                                ),
-                              );
-                              if (res == true) {
-                                await channel.delete();
-                              }
-                            },
-                    ),
-                ],
-            child: Container(
               color: chatThemeData.colorTheme.whiteSnow,
-              child: widget.channelPreviewBuilder?.call(context, channel) ??
-                  ChannelPreview(
-                    onLongPress: widget.onChannelLongPress,
-                    channel: channel,
-                    onImageTap: () => widget.onImageTap?.call(channel),
-                    onTap: (channel) => onTap(channel, widget.channelWidget),
-                  ),
             ),
+            child: widget.channelPreviewBuilder?.call(context, channel) ??
+                ChannelPreview(
+                  onLongPress: widget.onChannelLongPress,
+                  channel: channel,
+                  onImageTap: () => widget.onImageTap?.call(channel),
+                  onTap: (channel) => onTap(channel, widget.channelWidget),
+                ),
           ),
         ),
       );
@@ -637,12 +633,10 @@ class _ChannelListViewState extends State<ChannelListView> {
     context,
     ChannelsBlocState channelsProvider,
   ) =>
-      StreamBuilder<bool>(
+      BetterStreamBuilder<bool>(
           stream: channelsProvider.queryChannelsLoading,
           initialData: false,
-          builder: (context, snapshot) {
+          errorBuilder: (context, err) => Container(
-            if (snapshot.hasError) {
-              return Container(
                 color: StreamChatTheme.of(context)
                     .colorTheme
                     .accentRed
@@ -653,17 +647,15 @@ class _ChannelListViewState extends State<ChannelListView> {
                     child: Text('Error loading channels'),
                   ),
                 ),
-              );
+              ),
-            }
+          builder: (context, snapshot) => snapshot
-            return snapshot.data!
+              ? const Center(
-                ? const Center(
+                  child: Padding(
-                    child: Padding(
+                    padding: EdgeInsets.all(16),
-                      padding: EdgeInsets.all(16),
+                    child: CircularProgressIndicator(),
-                      child: CircularProgressIndicator(),
+                  ),
-                    ),
+                )
-                  )
+              : const Offstage());
-                : const Offstage();
-          });
 
   Widget _separatorBuilder(context, i) {
     final effect = StreamChatTheme.of(context).colorTheme.borderBottom;

packages/stream_chat_flutter/lib/src/channel_preview.dart

@@ -1,4 +1,5 @@
-import 'package:collection/collection.dart' show IterableExtension;
+import 'package:collection/collection.dart'
+    show IterableExtension, ListEquality;
 import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
 import 'package:jiffy/jiffy.dart';
@@ -69,12 +70,12 @@ class ChannelPreview extends StatelessWidget {
   Widget build(BuildContext context) {
     final channelPreviewTheme = StreamChatTheme.of(context).channelPreviewTheme;
     final streamChatState = StreamChat.of(context);
-
+    return BetterStreamBuilder<bool>(
-    return StreamBuilder<bool>(
         stream: channel.isMutedStream,
         initialData: channel.isMuted,
-        builder: (context, snapshot) => Opacity(
+        builder: (context, snapshot) => AnimatedOpacity(
-              opacity: snapshot.data! ? 0.5 : 1,
+              opacity: snapshot ? 0.5 : 1,
+              duration: const Duration(milliseconds: 300),
               child: ListTile(
                 visualDensity: VisualDensity.compact,
                 contentPadding: const EdgeInsets.symmetric(
@@ -103,14 +104,16 @@ class ChannelPreview extends StatelessWidget {
                             textStyle: channelPreviewTheme.title,
                           ),
                     ),
-                    StreamBuilder<List<Member>>(
+                    BetterStreamBuilder<List<Member>?>(
                       stream: channel.state?.membersStream,
                       initialData: channel.state?.members,
+                      comparator: const ListEquality().equals,
                       builder: (context, snapshot) {
-                        if (!snapshot.hasData ||
+                        if (snapshot?.isEmpty == true ||
-                            snapshot.data!.isEmpty ||
+                            snapshot?.any((Member e) =>
-                            !snapshot.data!.any((Member e) =>
+                                    e.user!.id ==
-                                e.user!.id == channel.client.state.user?.id)) {
+                                    channel.client.state.user?.id) !=
+                                true) {
                           return const SizedBox();
                         }
                         return UnreadIndicator(
@@ -159,14 +162,14 @@ class ChannelPreview extends StatelessWidget {
             ));
   }
 
-  Widget _buildDate(BuildContext context) => StreamBuilder<DateTime?>(
+  Widget _buildDate(BuildContext context) => BetterStreamBuilder<DateTime?>(
         stream: channel.lastMessageAtStream,
         initialData: channel.lastMessageAt,
         builder: (context, snapshot) {
-          if (!snapshot.hasData) {
+          if (snapshot == null) {
-            return const SizedBox();
+            return const Offstage();
           }
-          final lastMessageAt = snapshot.data!.toLocal();
+          final lastMessageAt = snapshot.toLocal();
 
           String stringDate;
           final now = DateTime.now();
@@ -219,11 +222,11 @@ class ChannelPreview extends StatelessWidget {
   }
 
   Widget _buildLastMessage(BuildContext context) =>
-      StreamBuilder<List<Message>?>(
+      BetterStreamBuilder<List<Message>?>(
         stream: channel.state!.messagesStream,
         initialData: channel.state!.messages,
         builder: (context, snapshot) {
-          final lastMessage = snapshot.data
+          final lastMessage = snapshot
               ?.lastWhereOrNull((m) => m.shadowed != true && !m.isDeleted);
           if (lastMessage == null) {
             return const SizedBox();

packages/stream_chat_flutter/lib/src/connection_status_builder.dart

@@ -8,7 +8,7 @@ import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';
 ///
 /// The widget will use the closest [StreamChatClient.wsConnectionStatusStream]
 /// in case no stream is provided.
-class ConnectionStatusBuilder extends StatelessWidget {
+class ConnectionStatusBuilder extends StatefulWidget {
   /// Creates a new ConnectionStatusBuilder
   const ConnectionStatusBuilder({
     Key? key,
@@ -36,20 +36,32 @@ class ConnectionStatusBuilder extends StatelessWidget {
       statusBuilder;
 
   @override
-  Widget build(BuildContext context) {
+  _ConnectionStatusBuilderState createState() =>
-    final client = StreamChat.of(context).client;
+      _ConnectionStatusBuilderState();
-    final stream = connectionStatusStream ?? client.wsConnectionStatusStream;
+}
-    return BetterStreamBuilder<ConnectionStatus>(
+
-      initialData: initialStatus ?? client.wsConnectionStatus,
+class _ConnectionStatusBuilderState extends State<ConnectionStatusBuilder> {
-      stream: stream,
+  late StreamChatClient client;
-      loadingBuilder: loadingBuilder,
+  late Stream<ConnectionStatus> stream;
-      errorBuilder: (context, error) {
+
-        if (errorBuilder != null) {
+  @override
-          return errorBuilder!(context, error);
+  Widget build(BuildContext context) => BetterStreamBuilder<ConnectionStatus>(
-        }
+        initialData: widget.initialStatus ?? client.wsConnectionStatus,
-        return const Offstage();
+        stream: stream,
-      },
+        loadingBuilder: widget.loadingBuilder,
-      builder: statusBuilder,
+        errorBuilder: (context, error) {
-    );
+          if (widget.errorBuilder != null) {
+            return widget.errorBuilder!(context, error);
+          }
+          return const Offstage();
+        },
+        builder: widget.statusBuilder,
+      );
+
+  @override
+  void didChangeDependencies() {
+    client = StreamChat.of(context).client;
+    stream = widget.connectionStatusStream ?? client.wsConnectionStatusStream;
+    super.didChangeDependencies();
   }
 }

packages/stream_chat_flutter/lib/src/emoji/emoji.dart

@@ -114325,6 +114325,9 @@ class Emoji {
   /// Get all Emojis
   static List<Emoji> all() => List.unmodifiable(_emojis);
 
+  static Iterable<String> chars() =>
+      _emojis.map((e) => e.char).whereType<String>();
+
   /// Returns Emoji by [char] and character
   static Emoji? byChar(String char) {
     return _emojis.firstWhereOrNull((Emoji emoji) => emoji.char == char);

packages/stream_chat_flutter/lib/src/extension.dart

@@ -4,7 +4,7 @@ import 'package:flutter/material.dart';
 import 'package:stream_chat_flutter/src/emoji/emoji.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
-final _emojis = Emoji.all();
+final _emojiChars = Emoji.chars();
 
 /// String extension
 extension StringExtension on String {
@@ -17,10 +17,10 @@ extension StringExtension on String {
   ///  1 to 3 emojis: big size with no text bubble.
   ///  4+ emojis or emojis+text: standard size with text bubble.
   bool get isOnlyEmoji {
+    if (isEmpty) return false;
+    if (length > 3) return false;
     final characters = trim().characters;
-    if (characters.isEmpty) return false;
+    return characters.every(_emojiChars.contains);
-    if (characters.length > 3) return false;
-    return characters.every((c) => _emojis.map((e) => e.char).contains(c));
   }
 }
 

packages/stream_chat_flutter/lib/src/info_tile.dart

@@ -40,6 +40,9 @@ class InfoTile extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final chatThemeData = StreamChatTheme.of(context);
+    if (!showMessage) {
+      return child;
+    }
     return PortalEntry(
       visible: showMessage,
       portalAnchor: tileAnchor ?? Alignment.topCenter,

packages/stream_chat_flutter/lib/src/message_actions_modal.dart

@@ -147,6 +147,119 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
         widget.message.attachments.any((it) => it.type == 'file') == true;
 
     final streamChatThemeData = StreamChatTheme.of(context);
+
+    final child = Center(
+      child: SingleChildScrollView(
+        child: Padding(
+          padding: const EdgeInsets.all(8),
+          child: Column(
+            crossAxisAlignment: widget.reverse
+                ? CrossAxisAlignment.end
+                : CrossAxisAlignment.start,
+            children: <Widget>[
+              if (widget.showReactions &&
+                  (widget.message.status == MessageSendingStatus.sent))
+                Align(
+                  alignment: Alignment(
+                      user?.id == widget.message.user?.id
+                          ? (divFactor >= 1.0 ? -0.2 : (1.2 - divFactor))
+                          : (divFactor >= 1.0 ? 0.2 : -(1.2 - divFactor)),
+                      0),
+                  child: ReactionPicker(
+                    message: widget.message,
+                  ),
+                ),
+              const SizedBox(height: 8),
+              IgnorePointer(
+                child: MessageWidget(
+                  key: const Key('MessageWidget'),
+                  reverse: widget.reverse,
+                  attachmentBorderRadiusGeometry: widget
+                      .attachmentBorderRadiusGeometry
+                      ?.mirrorBorderIfReversed(reverse: !widget.reverse),
+                  message: widget.message.copyWith(
+                    text: widget.message.text!.length > 200
+                        // ignore: lines_longer_than_80_chars
+                        ? '${widget.message.text!.substring(0, 200)}...'
+                        : widget.message.text,
+                  ),
+                  messageTheme: widget.messageTheme,
+                  showReactions: false,
+                  showUsername: false,
+                  showReplyMessage: false,
+                  showUserAvatar: widget.showUserAvatar,
+                  attachmentPadding: EdgeInsets.all(
+                    hasFileAttachment ? 4 : 2,
+                  ),
+                  showTimestamp: false,
+                  translateUserAvatar: false,
+                  padding: const EdgeInsets.all(0),
+                  textPadding: EdgeInsets.symmetric(
+                    vertical: 8,
+                    horizontal: widget.message.text!.isOnlyEmoji ? 0 : 16.0,
+                  ),
+                  showReactionPickerIndicator: widget.showReactions &&
+                      (widget.message.status == MessageSendingStatus.sent),
+                  showSendingIndicator: false,
+                  shape: widget.messageShape,
+                  attachmentShape: widget.attachmentShape,
+                  showPinHighlight: false,
+                  textBuilder: widget.textBuilder,
+                ),
+              ),
+              const SizedBox(height: 8),
+              Padding(
+                padding: EdgeInsets.only(
+                  left: widget.reverse ? 0 : 40,
+                ),
+                child: SizedBox(
+                  width: mediaQueryData.size.width * 0.75,
+                  child: Material(
+                    color: streamChatThemeData.colorTheme.whiteSnow,
+                    clipBehavior: Clip.hardEdge,
+                    shape: RoundedRectangleBorder(
+                      borderRadius: BorderRadius.circular(16),
+                    ),
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.stretch,
+                      children: [
+                        if (widget.showReplyMessage &&
+                            widget.message.status == MessageSendingStatus.sent)
+                          _buildReplyButton(context),
+                        if (widget.showThreadReplyMessage &&
+                            (widget.message.status ==
+                                MessageSendingStatus.sent) &&
+                            widget.message.parentId == null)
+                          _buildThreadReplyButton(context),
+                        if (widget.showResendMessage)
+                          _buildResendMessage(context),
+                        if (widget.showEditMessage) _buildEditMessage(context),
+                        if (widget.showCopyMessage) _buildCopyButton(context),
+                        if (widget.showFlagButton) _buildFlagButton(context),
+                        if (widget.showPinButton) _buildPinButton(context),
+                        if (widget.showDeleteMessage)
+                          _buildDeleteButton(context),
+                        ...widget.customActions
+                            .map((action) => _buildCustomAction(
+                                  context,
+                                  action,
+                                ))
+                      ].insertBetween(
+                        Container(
+                          height: 1,
+                          color: streamChatThemeData.colorTheme.greyWhisper,
+                        ),
+                      ),
+                    ),
+                  ),
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+
     return GestureDetector(
       behavior: HitTestBehavior.translucent,
       onTap: () => Navigator.maybePop(context),
@@ -168,136 +281,11 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
               tween: Tween(begin: 0, end: 1),
               duration: const Duration(milliseconds: 300),
               curve: Curves.easeInOutBack,
-              builder: (context, val, snapshot) => Transform.scale(
+              builder: (context, val, child) => Transform.scale(
                 scale: val,
-                child: Center(
+                child: child,
-                  child: SingleChildScrollView(
-                    child: Padding(
-                      padding: const EdgeInsets.all(8),
-                      child: Column(
-                        crossAxisAlignment: widget.reverse
-                            ? CrossAxisAlignment.end
-                            : CrossAxisAlignment.start,
-                        children: <Widget>[
-                          if (widget.showReactions &&
-                              (widget.message.status ==
-                                  MessageSendingStatus.sent))
-                            Align(
-                              alignment: Alignment(
-                                  user?.id == widget.message.user?.id
-                                      ? (divFactor >= 1.0
-                                          ? -0.2
-                                          : (1.2 - divFactor))
-                                      : (divFactor >= 1.0
-                                          ? 0.2
-                                          : -(1.2 - divFactor)),
-                                  0),
-                              child: ReactionPicker(
-                                message: widget.message,
-                              ),
-                            ),
-                          const SizedBox(height: 8),
-                          IgnorePointer(
-                            child: MessageWidget(
-                              key: const Key('MessageWidget'),
-                              reverse: widget.reverse,
-                              attachmentBorderRadiusGeometry: widget
-                                  .attachmentBorderRadiusGeometry
-                                  ?.mirrorBorderIfReversed(
-                                      reverse: !widget.reverse),
-                              message: widget.message.copyWith(
-                                text: widget.message.text!.length > 200
-                                    // ignore: lines_longer_than_80_chars
-                                    ? '${widget.message.text!.substring(0, 200)}...'
-                                    : widget.message.text,
-                              ),
-                              messageTheme: widget.messageTheme,
-                              showReactions: false,
-                              showUsername: false,
-                              showReplyMessage: false,
-                              showUserAvatar: widget.showUserAvatar,
-                              attachmentPadding: EdgeInsets.all(
-                                hasFileAttachment ? 4 : 2,
-                              ),
-                              showTimestamp: false,
-                              translateUserAvatar: false,
-                              padding: const EdgeInsets.all(0),
-                              textPadding: EdgeInsets.symmetric(
-                                vertical: 8,
-                                horizontal:
-                                    widget.message.text!.isOnlyEmoji ? 0 : 16.0,
-                              ),
-                              showReactionPickerIndicator:
-                                  widget.showReactions &&
-                                      (widget.message.status ==
-                                          MessageSendingStatus.sent),
-                              showSendingIndicator: false,
-                              shape: widget.messageShape,
-                              attachmentShape: widget.attachmentShape,
-                              showPinHighlight: false,
-                              textBuilder: widget.textBuilder,
-                            ),
-                          ),
-                          const SizedBox(height: 8),
-                          Padding(
-                            padding: EdgeInsets.only(
-                              left: widget.reverse ? 0 : 40,
-                            ),
-                            child: SizedBox(
-                              width: mediaQueryData.size.width * 0.75,
-                              child: Material(
-                                color: streamChatThemeData.colorTheme.whiteSnow,
-                                clipBehavior: Clip.hardEdge,
-                                shape: RoundedRectangleBorder(
-                                  borderRadius: BorderRadius.circular(16),
-                                ),
-                                child: Column(
-                                  crossAxisAlignment:
-                                      CrossAxisAlignment.stretch,
-                                  children: [
-                                    if (widget.showReplyMessage &&
-                                        widget.message.status ==
-                                            MessageSendingStatus.sent)
-                                      _buildReplyButton(context),
-                                    if (widget.showThreadReplyMessage &&
-                                        (widget.message.status ==
-                                            MessageSendingStatus.sent) &&
-                                        widget.message.parentId == null)
-                                      _buildThreadReplyButton(context),
-                                    if (widget.showResendMessage)
-                                      _buildResendMessage(context),
-                                    if (widget.showEditMessage)
-                                      _buildEditMessage(context),
-                                    if (widget.showCopyMessage)
-                                      _buildCopyButton(context),
-                                    if (widget.showFlagButton)
-                                      _buildFlagButton(context),
-                                    if (widget.showPinButton)
-                                      _buildPinButton(context),
-                                    if (widget.showDeleteMessage)
-                                      _buildDeleteButton(context),
-                                    ...widget.customActions
-                                        .map((action) => _buildCustomAction(
-                                              context,
-                                              action,
-                                            ))
-                                  ].insertBetween(
-                                    Container(
-                                      height: 1,
-                                      color: streamChatThemeData
-                                          .colorTheme.greyWhisper,
-                                    ),
-                                  ),
-                                ),
-                              ),
-                            ),
-                          ),
-                        ],
-                      ),
-                    ),
-                  ),
-                ),
               ),
+              child: child,
             ),
         ],
       ),

packages/stream_chat_flutter/lib/src/message_list_view.dart

@@ -2,6 +2,7 @@ import 'dart:async';
 import 'dart:math';
 
 import 'package:flutter/cupertino.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:jiffy/jiffy.dart';
 import 'package:rxdart/rxdart.dart';
@@ -281,8 +282,10 @@ class _MessageListViewState extends State<MessageListView> {
   void Function(Message)? _onThreadTap;
   bool _showScrollToBottom = false;
   late final ItemPositionsListener _itemPositionListener;
+  late final Stream<Iterable<ItemPosition>> _itemPositionStream;
   int? _messageListLength;
   StreamChannelState? streamChannel;
+  late StreamChatThemeData _streamTheme;
 
   int? get _initialIndex {
     if (widget.initialScrollIndex != null) return widget.initialScrollIndex;
@@ -324,37 +327,34 @@ class _MessageListViewState extends State<MessageListView> {
   final MessageListController _messageListController = MessageListController();
 
   @override
-  Widget build(BuildContext context) {
+  Widget build(BuildContext context) => MessageListCore(
-    final chatThemeData = StreamChatTheme.of(context);
+        messageFilter: widget.messageFilter,
-    return MessageListCore(
+        loadingBuilder: widget.loadingBuilder ??
-      messageFilter: widget.messageFilter,
+            (context) => const Center(
-      loadingBuilder: widget.loadingBuilder ??
+                  child: CircularProgressIndicator(),
-          (context) => const Center(
-                child: CircularProgressIndicator(),
-              ),
-      emptyBuilder: widget.emptyBuilder ??
-          (context) => Center(
-                child: Text(
-                  'No chats here yet...',
-                  style: chatThemeData.textTheme.footnote.copyWith(
-                      color: chatThemeData.colorTheme.black.withOpacity(.5)),
                 ),
-              ),
+        emptyBuilder: widget.emptyBuilder ??
-      messageListBuilder:
+            (context) => Center(
-          widget.messageListBuilder ?? (context, list) => _buildListView(list),
+                  child: Text(
-      messageListController: _messageListController,
+                    'No chats here yet...',
-      parentMessage: widget.parentMessage,
+                    style: _streamTheme.textTheme.footnote.copyWith(
-      showScrollToBottom: widget.showScrollToBottom,
+                        color: _streamTheme.colorTheme.black.withOpacity(.5)),
-      errorWidgetBuilder: widget.errorWidgetBuilder ??
+                  ),
-          (BuildContext context, Object error) => Center(
-                child: Text(
-                  'Something went wrong',
-                  style: chatThemeData.textTheme.footnote.copyWith(
-                      color: chatThemeData.colorTheme.black.withOpacity(.5)),
                 ),
-              ),
+        messageListBuilder: widget.messageListBuilder ??
-    );
+            (context, list) => _buildListView(list),
-  }
+        messageListController: _messageListController,
+        parentMessage: widget.parentMessage,
+        showScrollToBottom: widget.showScrollToBottom,
+        errorWidgetBuilder: widget.errorWidgetBuilder ??
+            (BuildContext context, Object error) => Center(
+                  child: Text(
+                    'Something went wrong',
+                    style: _streamTheme.textTheme.footnote.copyWith(
+                        color: _streamTheme.colorTheme.black.withOpacity(.5)),
+                  ),
+                ),
+      );
 
   Widget _buildListView(List<Message> data) {
     messages = data;
@@ -400,8 +400,7 @@ class _MessageListViewState extends State<MessageListView> {
             }
 
             return InfoTile(
-              // ignore: avoid_bool_literals_in_conditional_expressions
+              showMessage: widget.showConnectionStateTile && showStatus,
-              showMessage: widget.showConnectionStateTile ? showStatus : false,
               tileAnchor: Alignment.topCenter,
               childAnchor: Alignment.topCenter,
               message: statusString,
@@ -448,10 +447,9 @@ class _MessageListViewState extends State<MessageListView> {
                     if (i == 0) return const SizedBox(height: 30);
                     if (i == messages.length + 1) {
                       final replyCount = widget.parentMessage!.replyCount;
-                      final chatThemeData = StreamChatTheme.of(context);
                       return Container(
                         decoration: BoxDecoration(
-                          gradient: chatThemeData.colorTheme.bgGradient,
+                          gradient: _streamTheme.colorTheme.bgGradient,
                         ),
                         child: Padding(
                           padding: const EdgeInsets.all(8),
@@ -459,7 +457,7 @@ class _MessageListViewState extends State<MessageListView> {
                             // ignore: lines_longer_than_80_chars
                             '$replyCount ${replyCount == 1 ? 'Reply' : 'Replies'}',
                             textAlign: TextAlign.center,
-                            style: chatThemeData
+                            style: _streamTheme
                                 .channelTheme.channelHeaderTheme.subtitle,
                           ),
                         ),
@@ -571,9 +569,18 @@ class _MessageListViewState extends State<MessageListView> {
         if (widget.showScrollToBottom) _buildScrollToBottom(),
         Positioned(
           top: 20,
-          child: ValueListenableBuilder<Iterable<ItemPosition>>(
+          child: BetterStreamBuilder<Iterable<ItemPosition>>(
-            valueListenable: _itemPositionListener.itemPositions,
+            initialData: _itemPositionListener.itemPositions.value,
-            builder: (context, values, _) {
+            stream: _itemPositionStream,
+            comparator: (a, b) {
+              if (a == null) {
+                return false;
+              }
+              final aTop = _getTopElement(a)?.index;
+              final bTop = _getTopElement(b)?.index;
+              return aTop == bTop;
+            },
+            builder: (context, values) {
               final items = _itemPositionListener.itemPositions.value;
               if (items.isEmpty || messages.isEmpty) {
                 return const SizedBox();
@@ -640,7 +647,6 @@ class _MessageListViewState extends State<MessageListView> {
           final showUnreadCount = unreadCount > 0 &&
               streamChannel!.channel.state!.members.any((e) =>
                   e.userId == streamChannel!.channel.client.state.user!.id);
-          final chatThemeData = StreamChatTheme.of(context);
           return Positioned(
             bottom: 8,
             right: 8,
@@ -650,7 +656,7 @@ class _MessageListViewState extends State<MessageListView> {
               clipBehavior: Clip.none,
               children: [
                 FloatingActionButton(
-                  backgroundColor: chatThemeData.colorTheme.white,
+                  backgroundColor: _streamTheme.colorTheme.white,
                   onPressed: () {
                     if (unreadCount > 0) {
                       streamChannel!.channel.markRead();
@@ -669,7 +675,7 @@ class _MessageListViewState extends State<MessageListView> {
                     }
                   },
                   child: StreamSvgIcon.down(
-                    color: chatThemeData.colorTheme.black,
+                    color: _streamTheme.colorTheme.black,
                   ),
                 ),
                 if (showUnreadCount)
@@ -700,39 +706,13 @@ class _MessageListViewState extends State<MessageListView> {
   Widget _buildLoadingIndicator(
     StreamChannelState streamChannel,
     QueryDirection direction,
-  ) {
+  ) =>
-    final stream = direction == QueryDirection.top
+      _LoadingIndicator(
-        ? streamChannel.queryTopMessages
+        direction: direction,
-        : streamChannel.queryBottomMessages;
+        streamTheme: _streamTheme,
-    return BetterStreamBuilder<bool>(
+        streamChannel: streamChannel,
-      key: Key('LOADING-INDICATOR $direction'),
+        isThreadConversation: _isThreadConversation,
-      stream: stream,
+      );
-      initialData: false,
-      errorBuilder: (context, error) => Container(
-        color: StreamChatTheme.of(context).colorTheme.accentRed.withOpacity(.2),
-        child: const Center(
-          child: Text('Error loading messages'),
-        ),
-      ),
-      builder: (context, snapshot) {
-        if (!snapshot) {
-          if (!_isThreadConversation && direction == QueryDirection.top) {
-            return const SizedBox(
-              height: 52,
-              width: double.infinity,
-            );
-          }
-          return const Offstage();
-        }
-        return const Center(
-          child: Padding(
-            padding: EdgeInsets.all(8),
-            child: CircularProgressIndicator(),
-          ),
-        );
-      },
-    );
-  }
 
   Widget _buildTopMessage(
     BuildContext context,
@@ -818,7 +798,6 @@ class _MessageListViewState extends State<MessageListView> {
     final currentUserMember =
         members.firstWhere((e) => e.user!.id == currentUser!.id);
 
-    final chatThemeData = StreamChatTheme.of(context);
     return MessageWidget(
       showReplyMessage: false,
       showResendMessage: false,
@@ -847,8 +826,8 @@ class _MessageListViewState extends State<MessageListView> {
       borderSide: isMyMessage || isOnlyEmoji ? BorderSide.none : null,
       showUserAvatar: isMyMessage ? DisplayWidget.gone : DisplayWidget.show,
       messageTheme: isMyMessage
-          ? chatThemeData.ownMessageTheme
+          ? _streamTheme.ownMessageTheme
-          : chatThemeData.otherMessageTheme,
+          : _streamTheme.otherMessageTheme,
       onShowMessage: widget.onShowMessage,
       onReturnAction: (action) {
         switch (action) {
@@ -962,7 +941,6 @@ class _MessageListViewState extends State<MessageListView> {
     final currentUserMember =
         members.firstWhere((e) => e.user!.id == currentUser!.id);
 
-    final chatThemeData = StreamChatTheme.of(context);
     Widget child = MessageWidget(
       key: ValueKey<String>('MESSAGE-${message.id}'),
       message: message,
@@ -1049,8 +1027,8 @@ class _MessageListViewState extends State<MessageListView> {
         horizontal: isOnlyEmoji ? 0 : 16.0,
       ),
       messageTheme: isMyMessage
-          ? chatThemeData.ownMessageTheme
+          ? _streamTheme.ownMessageTheme
-          : chatThemeData.otherMessageTheme,
+          : _streamTheme.otherMessageTheme,
       readList: readList,
       allRead: allRead,
       onShowMessage: widget.onShowMessage,
@@ -1091,7 +1069,7 @@ class _MessageListViewState extends State<MessageListView> {
             widget.onMessageSwiped?.call(message);
           },
           backgroundIcon: StreamSvgIcon.reply(
-            color: chatThemeData.colorTheme.accentBlue,
+            color: _streamTheme.colorTheme.accentBlue,
           ),
           child: child,
         ),
@@ -1101,7 +1079,7 @@ class _MessageListViewState extends State<MessageListView> {
     if (!initialMessageHighlightComplete &&
         widget.highlightInitialMessage &&
         _isInitialMessage(message.id)) {
-      final colorTheme = chatThemeData.colorTheme;
+      final colorTheme = _streamTheme.colorTheme;
       final highlightColor =
           widget.messageHighlightColor ?? colorTheme.highlight;
       child = TweenAnimationBuilder<Color?>(
@@ -1131,6 +1109,8 @@ class _MessageListViewState extends State<MessageListView> {
     _scrollController = widget.scrollController ?? ItemScrollController();
     _itemPositionListener =
         widget.itemPositionListener ?? ItemPositionsListener.create();
+    _itemPositionStream =
+        valueListenableToStreamAdapter(_itemPositionListener.itemPositions);
 
     _getOnThreadTap();
     super.initState();
@@ -1139,6 +1119,7 @@ class _MessageListViewState extends State<MessageListView> {
   @override
   void didChangeDependencies() {
     final newStreamChannel = StreamChannel.of(context);
+    _streamTheme = StreamChatTheme.of(context);
 
     if (newStreamChannel != streamChannel) {
       streamChannel = newStreamChannel;
@@ -1209,3 +1190,78 @@ class _MessageListViewState extends State<MessageListView> {
     super.dispose();
   }
 }
+
+class _LoadingIndicator extends StatelessWidget {
+  const _LoadingIndicator({
+    Key? key,
+    required this.streamTheme,
+    required this.isThreadConversation,
+    required this.direction,
+    required this.streamChannel,
+  }) : super(key: key);
+
+  final StreamChatThemeData streamTheme;
+  final bool isThreadConversation;
+  final QueryDirection direction;
+  final StreamChannelState streamChannel;
+
+  @override
+  Widget build(BuildContext context) {
+    final stream = direction == QueryDirection.top
+        ? streamChannel.queryTopMessages
+        : streamChannel.queryBottomMessages;
+    return BetterStreamBuilder<bool>(
+      key: Key('LOADING-INDICATOR $direction'),
+      stream: stream,
+      initialData: false,
+      errorBuilder: (context, error) => Container(
+        color: streamTheme.colorTheme.accentRed.withOpacity(.2),
+        child: const Center(
+          child: Text('Error loading messages'),
+        ),
+      ),
+      builder: (context, snapshot) {
+        if (!snapshot) {
+          if (!isThreadConversation && direction == QueryDirection.top) {
+            return const SizedBox(
+              height: 52,
+              width: double.infinity,
+            );
+          }
+          return const Offstage();
+        }
+        return const Center(
+          child: Padding(
+            padding: EdgeInsets.all(8),
+            child: CircularProgressIndicator(),
+          ),
+        );
+      },
+    );
+  }
+}
+
+Stream<T> valueListenableToStreamAdapter<T>(ValueListenable<T> listenable) {
+  late StreamController<T> controller;
+
+  void listener() {
+    controller.add(listenable.value);
+  }
+
+  void start() {
+    listenable.addListener(listener);
+  }
+
+  void end() {
+    listenable.removeListener(listener);
+  }
+
+  controller = StreamController<T>(
+    onListen: start,
+    onPause: end,
+    onResume: start,
+    onCancel: end,
+  );
+
+  return controller.stream;
+}

packages/stream_chat_flutter/lib/src/message_reactions_modal.dart

@@ -77,113 +77,111 @@ class MessageReactionsModal extends StatelessWidget {
     final divFactor = message.attachments.isNotEmpty == true
         ? 1
         : (roughSentenceSize == 0 ? 1 : (roughSentenceSize / roughMaxSize));
+    final hasFileAttachment =
+        message.attachments.any((it) => it.type == 'file') == true;
 
-    return TweenAnimationBuilder<double>(
+    final child = Center(
-      tween: Tween(begin: 0, end: 1),
+      child: SingleChildScrollView(
-      duration: const Duration(milliseconds: 300),
+        child: Padding(
-      curve: Curves.easeInOutBack,
+          padding: const EdgeInsets.all(8),
-      builder: (context, val, snapshot) {
+          child: Column(
-        final hasFileAttachment =
+            mainAxisAlignment: MainAxisAlignment.center,
-            message.attachments.any((it) => it.type == 'file') == true;
+            crossAxisAlignment: CrossAxisAlignment.stretch,
-        return GestureDetector(
+            children: <Widget>[
-          behavior: HitTestBehavior.translucent,
+              if (showReactions &&
-          onTap: () => Navigator.maybePop(context),
+                  (message.status == MessageSendingStatus.sent))
-          child: Stack(
+                Align(
-            children: [
+                  alignment: Alignment(
-              Positioned.fill(
+                      user!.id == message.user!.id
-                child: BackdropFilter(
+                          ? (divFactor >= 1.0 ? -0.2 : (1.2 - divFactor))
-                  filter: ImageFilter.blur(
+                          : (divFactor >= 1.0 ? 0.2 : -(1.2 - divFactor)),
-                    sigmaX: 10,
+                      0),
-                    sigmaY: 10,
+                  child: ReactionPicker(
-                  ),
+                    message: message,
-                  child: Container(
-                    color: StreamChatTheme.of(context).colorTheme.overlay,
                   ),
                 ),
-              ),
+              const SizedBox(height: 8),
-              Transform.scale(
+              IgnorePointer(
-                scale: val,
+                child: MessageWidget(
-                child: Center(
+                  key: const Key('MessageWidget'),
-                  child: SingleChildScrollView(
+                  reverse: reverse,
-                    child: Padding(
+                  message: message.copyWith(
-                      padding: const EdgeInsets.all(8),
+                    text: message.text!.length > 200
-                      child: Column(
+                        ? '${message.text!.substring(0, 200)}...'
-                        mainAxisAlignment: MainAxisAlignment.center,
+                        : message.text,
-                        crossAxisAlignment: CrossAxisAlignment.stretch,
-                        children: <Widget>[
-                          if (showReactions &&
-                              (message.status == MessageSendingStatus.sent))
-                            Align(
-                              alignment: Alignment(
-                                  user!.id == message.user!.id
-                                      ? (divFactor >= 1.0
-                                          ? -0.2
-                                          : (1.2 - divFactor))
-                                      : (divFactor >= 1.0
-                                          ? 0.2
-                                          : -(1.2 - divFactor)),
-                                  0),
-                              child: ReactionPicker(
-                                message: message,
-                              ),
-                            ),
-                          const SizedBox(height: 8),
-                          IgnorePointer(
-                            child: MessageWidget(
-                              key: const Key('MessageWidget'),
-                              reverse: reverse,
-                              message: message.copyWith(
-                                text: message.text!.length > 200
-                                    ? '${message.text!.substring(0, 200)}...'
-                                    : message.text,
-                              ),
-                              messageTheme: messageTheme,
-                              showReactions: false,
-                              showUsername: false,
-                              showUserAvatar: showUserAvatar,
-                              showTimestamp: false,
-                              translateUserAvatar: false,
-                              showSendingIndicator: false,
-                              shape: messageShape,
-                              attachmentShape: attachmentShape,
-                              padding: const EdgeInsets.all(0),
-                              attachmentBorderRadiusGeometry:
-                                  attachmentBorderRadiusGeometry
-                                      ?.mirrorBorderIfReversed(
-                                          reverse: !reverse),
-                              attachmentPadding: EdgeInsets.all(
-                                hasFileAttachment ? 4 : 2,
-                              ),
-                              textPadding: EdgeInsets.symmetric(
-                                vertical: 8,
-                                horizontal:
-                                    message.text!.isOnlyEmoji ? 0 : 16.0,
-                              ),
-                              showReactionPickerIndicator: showReactions &&
-                                  (message.status == MessageSendingStatus.sent),
-                              textBuilder: textBuilder,
-                              showPinHighlight: false,
-                            ),
-                          ),
-                          if (message.latestReactions?.isNotEmpty == true) ...[
-                            const SizedBox(height: 8),
-                            _buildReactionCard(context),
-                          ]
-                        ],
-                      ),
-                    ),
                   ),
+                  messageTheme: messageTheme,
+                  showReactions: false,
+                  showUsername: false,
+                  showUserAvatar: showUserAvatar,
+                  showTimestamp: false,
+                  translateUserAvatar: false,
+                  showSendingIndicator: false,
+                  shape: messageShape,
+                  attachmentShape: attachmentShape,
+                  padding: const EdgeInsets.all(0),
+                  attachmentBorderRadiusGeometry: attachmentBorderRadiusGeometry
+                      ?.mirrorBorderIfReversed(reverse: !reverse),
+                  attachmentPadding: EdgeInsets.all(
+                    hasFileAttachment ? 4 : 2,
+                  ),
+                  textPadding: EdgeInsets.symmetric(
+                    vertical: 8,
+                    horizontal: message.text!.isOnlyEmoji ? 0 : 16.0,
+                  ),
+                  showReactionPickerIndicator: showReactions &&
+                      (message.status == MessageSendingStatus.sent),
+                  textBuilder: textBuilder,
+                  showPinHighlight: false,
                 ),
               ),
+              if (message.latestReactions?.isNotEmpty == true) ...[
+                const SizedBox(height: 8),
+                _buildReactionCard(
+                  context,
+                  user,
+                ),
+              ]
             ],
           ),
-        );
+        ),
-      },
+      ),
+    );
+
+    return GestureDetector(
+      behavior: HitTestBehavior.translucent,
+      onTap: () => Navigator.maybePop(context),
+      child: Stack(
+        children: [
+          Positioned.fill(
+            child: BackdropFilter(
+              filter: ImageFilter.blur(
+                sigmaX: 10,
+                sigmaY: 10,
+              ),
+              child: DecoratedBox(
+                decoration: BoxDecoration(
+                  color: StreamChatTheme.of(context).colorTheme.overlay,
+                ),
+              ),
+            ),
+          ),
+          TweenAnimationBuilder<double>(
+            tween: Tween(begin: 0, end: 1),
+            duration: const Duration(milliseconds: 300),
+            curve: Curves.easeInOutBack,
+            builder: (context, val, widget) => Transform.scale(
+              scale: val,
+              child: widget,
+            ),
+            child: child,
+          ),
+        ],
+      ),
     );
   }
 
-  Widget _buildReactionCard(BuildContext context) {
+  Widget _buildReactionCard(BuildContext context, User? user) {
-    final currentUser = StreamChat.of(context).user;
     final chatThemeData = StreamChatTheme.of(context);
     return Card(
       color: chatThemeData.colorTheme.white,
@@ -210,7 +208,7 @@ class MessageReactionsModal extends StatelessWidget {
                   children: message.latestReactions!
                       .map((e) => _buildReaction(
                             e,
-                            currentUser!,
+                            user!,
                             context,
                           ))
                       .toList(),

packages/stream_chat_flutter/lib/src/message_widget.dart

@@ -413,37 +413,39 @@ class _MessageWidgetState extends State<MessageWidget>
 
   bool get showTimeStamp => widget.showTimestamp;
 
-  bool get isMessageRead => widget.readList?.isNotEmpty == true;
+  late final bool isMessageRead = widget.readList?.isNotEmpty == true;
 
   bool get showInChannel => widget.showInChannelIndicator;
 
   bool get hasQuotedMessage => widget.message.quotedMessage != null;
 
-  bool get isSendFailed => widget.message.status == MessageSendingStatus.failed;
+  late final bool isSendFailed =
+      widget.message.status == MessageSendingStatus.failed;
 
-  bool get isUpdateFailed =>
+  late final bool isUpdateFailed =
       widget.message.status == MessageSendingStatus.failed_update;
 
-  bool get isDeleteFailed =>
+  late final bool isDeleteFailed =
       widget.message.status == MessageSendingStatus.failed_delete;
 
-  bool get isFailedState => isSendFailed || isUpdateFailed || isDeleteFailed;
+  late final bool isFailedState =
+      isSendFailed || isUpdateFailed || isDeleteFailed;
 
-  bool get isGiphy =>
+  late final bool isGiphy =
       widget.message.attachments.any((element) => element.type == 'giphy') ==
-      true;
+          true;
 
-  bool get hasNonUrlAttachments =>
+  late final bool isOnlyEmoji = widget.message.text?.isOnlyEmoji == true;
-      widget.message.attachments
+
+  late final bool hasNonUrlAttachments = widget.message.attachments
           .where((it) => it.ogScrapeUrl == null)
           .isNotEmpty ==
       true;
 
-  bool get hasUrlAttachments =>
+  late final bool hasUrlAttachments =
       widget.message.attachments.any((it) => it.ogScrapeUrl != null) == true;
 
-  bool get showBottomRow =>
+  late final bool showBottomRow = showThreadReplyIndicator ||
-      showThreadReplyIndicator ||
       showUsername ||
       showTimeStamp ||
       showInChannel ||
@@ -453,6 +455,9 @@ class _MessageWidgetState extends State<MessageWidget>
   @override
   bool get wantKeepAlive => widget.message.attachments.isNotEmpty == true;
 
+  late StreamChatThemeData _streamChatTheme;
+  late StreamChatState _streamChat;
+
   @override
   Widget build(BuildContext context) {
     super.build(context);
@@ -466,7 +471,7 @@ class _MessageWidgetState extends State<MessageWidget>
           ? MaterialType.card
           : MaterialType.transparency,
       color: widget.message.pinned && widget.showPinHighlight
-          ? StreamChatTheme.of(context).colorTheme.highlight
+          ? _streamChatTheme.colorTheme.highlight
           : null,
       child: Portal(
         child: InkWell(
@@ -527,7 +532,8 @@ class _MessageWidgetState extends State<MessageWidget>
                                       transform: Matrix4.translationValues(
                                           widget.reverse ? 12 : -12, 0, 0),
                                       constraints: const BoxConstraints(
-                                          maxWidth: 22 * 6.0),
+                                        maxWidth: 22 * 6.0,
+                                      ),
                                       child: _buildReactionIndicator(context),
                                     ),
                                     portalAnchor:
@@ -572,7 +578,7 @@ class _MessageWidgetState extends State<MessageWidget>
                                                   ),
                                                 )
                                               : Card(
-                                                  clipBehavior: Clip.antiAlias,
+                                                  clipBehavior: Clip.hardEdge,
                                                   elevation: 0,
                                                   margin: EdgeInsets.symmetric(
                                                     horizontal: (isFailedState
@@ -626,9 +632,8 @@ class _MessageWidgetState extends State<MessageWidget>
                                             top: -8,
                                             child: CustomPaint(
                                               painter: ReactionBubblePainter(
-                                                StreamChatTheme.of(context)
+                                                _streamChatTheme
-                                                    .colorTheme
+                                                    .colorTheme.white,
-                                                    .white,
                                                 Colors.transparent,
                                                 Colors.transparent,
                                                 tailCirclesSpace: 1,
@@ -673,14 +678,20 @@ class _MessageWidgetState extends State<MessageWidget>
     );
   }
 
+  @override
+  void didChangeDependencies() {
+    _streamChatTheme = StreamChatTheme.of(context);
+    _streamChat = StreamChat.of(context);
+    super.didChangeDependencies();
+  }
+
   Widget _buildQuotedMessage() {
-    final isMyMessage =
+    final isMyMessage = widget.message.user?.id == _streamChat.user?.id;
-        widget.message.user?.id == StreamChat.of(context).user?.id;
     final onTap = widget.message.quotedMessage?.isDeleted != true &&
             widget.onQuotedMessageTap != null
         ? () => widget.onQuotedMessageTap!(widget.message.quotedMessageId)
         : null;
-    final chatThemeData = StreamChatTheme.of(context);
+    final chatThemeData = _streamChatTheme;
     return QuotedMessageWidget(
       onTap: onTap,
       message: widget.message.quotedMessage!,
@@ -695,7 +706,7 @@ class _MessageWidgetState extends State<MessageWidget>
 
   Widget get _bottomRow {
     if (isDeleted) {
-      final chatThemeData = StreamChatTheme.of(context);
+      final chatThemeData = _streamChatTheme;
       return Row(
         mainAxisSize: MainAxisSize.min,
         children: [
@@ -849,36 +860,16 @@ class _MessageWidgetState extends State<MessageWidget>
     );
   }
 
-  Widget _buildThreadParticipantsIndicator(Iterable<User> threadParticipants) {
+  Widget _buildThreadParticipantsIndicator(Iterable<User> threadParticipants) =>
-    var padding = 0.0;
+      _ThreadParticipants(
-    return Stack(
+        streamChatTheme: _streamChatTheme,
-      children: threadParticipants.map((user) {
+        threadParticipants: threadParticipants,
-        padding += 8.0;
+      );
-        return Positioned(
-          right: padding - 8,
-          bottom: 0,
-          top: 0,
-          child: Container(
-            decoration: BoxDecoration(
-              shape: BoxShape.circle,
-              color: StreamChatTheme.of(context).colorTheme.white,
-            ),
-            padding: const EdgeInsets.all(1),
-            child: UserAvatar(
-              user: user,
-              constraints: BoxConstraints.loose(const Size.fromRadius(7)),
-              showOnlineStatus: false,
-            ),
-          ),
-        );
-      }).toList(),
-    );
-  }
 
   Widget _buildReactionIndicator(
     BuildContext context,
   ) {
-    final ownId = StreamChat.of(context).user!.id;
+    final ownId = _streamChat.user!.id;
     final reactionsMap = <String, Reaction>{};
     widget.message.latestReactions?.forEach((element) {
       if (!reactionsMap.containsKey(element.type) ||
@@ -918,7 +909,7 @@ class _MessageWidgetState extends State<MessageWidget>
 
     showDialog(
         context: context,
-        barrierColor: StreamChatTheme.of(context).colorTheme.overlay,
+        barrierColor: _streamChatTheme.colorTheme.overlay,
         builder: (context) => StreamChannel(
               channel: channel,
               child: MessageActionsModal(
@@ -969,7 +960,7 @@ class _MessageWidgetState extends State<MessageWidget>
     final channel = StreamChannel.of(context).channel;
     showDialog(
       context: context,
-      barrierColor: StreamChatTheme.of(context).colorTheme.overlay,
+      barrierColor: _streamChatTheme.colorTheme.overlay,
       builder: (context) => StreamChannel(
         channel: channel,
         child: MessageReactionsModal(
@@ -1000,7 +991,7 @@ class _MessageWidgetState extends State<MessageWidget>
       side: hasFiles
           ? widget.attachmentBorderSide ??
               BorderSide(
-                color: StreamChatTheme.of(context).colorTheme.greyWhisper,
+                color: _streamChatTheme.colorTheme.greyWhisper,
               )
           : BorderSide.none,
       borderRadius: widget.attachmentBorderRadiusGeometry ?? BorderRadius.zero,
@@ -1010,7 +1001,7 @@ class _MessageWidgetState extends State<MessageWidget>
   ShapeBorder _getDefaultShape(BuildContext context) => RoundedRectangleBorder(
         side: widget.borderSide ??
             BorderSide(
-              color: StreamChatTheme.of(context).colorTheme.greyWhisper,
+              color: _streamChatTheme.colorTheme.greyWhisper,
             ),
         borderRadius: widget.borderRadiusGeometry ?? BorderRadius.zero,
       );
@@ -1101,7 +1092,7 @@ class _MessageWidgetState extends State<MessageWidget>
             Text(
               widget.readList!.length.toString(),
               style: style.copyWith(
-                color: StreamChatTheme.of(context).colorTheme.accentBlue,
+                color: _streamChatTheme.colorTheme.accentBlue,
               ),
             ),
           const SizedBox(width: 2),
@@ -1158,7 +1149,7 @@ class _MessageWidgetState extends State<MessageWidget>
 
   Widget _buildPinnedMessage(Message message) {
     final pinnedBy = message.pinnedBy;
-    final pinnedByMe = StreamChat.of(context).user!.id == pinnedBy!.id;
+    final pinnedByMe = _streamChat.user!.id == pinnedBy!.id;
 
     return Padding(
       padding: const EdgeInsets.only(left: 8, right: 8, top: 4, bottom: 8),
@@ -1174,7 +1165,7 @@ class _MessageWidgetState extends State<MessageWidget>
           Text(
             'Pinned by ${pinnedByMe ? 'You' : pinnedBy.name}',
             style: TextStyle(
-              color: StreamChatTheme.of(context).colorTheme.grey,
+              color: _streamChatTheme.colorTheme.grey,
               fontSize: 13,
               fontWeight: FontWeight.w400,
             ),
@@ -1184,9 +1175,7 @@ class _MessageWidgetState extends State<MessageWidget>
     );
   }
 
-  bool get isOnlyEmoji => widget.message.text!.isOnlyEmoji;
+  late final bool isPinned = widget.message.pinned;
-
-  bool get isPinned => widget.message.pinned;
 
   Color? _getBackgroundColor() {
     if (hasQuotedMessage) {
@@ -1194,7 +1183,7 @@ class _MessageWidgetState extends State<MessageWidget>
     }
 
     if (hasUrlAttachments) {
-      return StreamChatTheme.of(context).colorTheme.blueAlice;
+      return _streamChatTheme.colorTheme.blueAlice;
     }
 
     if (isOnlyEmoji) {
@@ -1226,6 +1215,45 @@ class _MessageWidgetState extends State<MessageWidget>
   }
 }
 
+class _ThreadParticipants extends StatelessWidget {
+  const _ThreadParticipants({
+    Key? key,
+    required StreamChatThemeData streamChatTheme,
+    required this.threadParticipants,
+  })  : _streamChatTheme = streamChatTheme,
+        super(key: key);
+
+  final StreamChatThemeData _streamChatTheme;
+  final Iterable<User> threadParticipants;
+
+  @override
+  Widget build(BuildContext context) {
+    var padding = 0.0;
+    return Stack(
+      children: threadParticipants.map((user) {
+        padding += 8.0;
+        return Positioned(
+          right: padding - 8,
+          bottom: 0,
+          top: 0,
+          child: Container(
+            decoration: BoxDecoration(
+              shape: BoxShape.circle,
+              color: _streamChatTheme.colorTheme.white,
+            ),
+            padding: const EdgeInsets.all(1),
+            child: UserAvatar(
+              user: user,
+              constraints: BoxConstraints.loose(const Size.fromRadius(7)),
+              showOnlineStatus: false,
+            ),
+          ),
+        );
+      }).toList(),
+    );
+  }
+}
+
 class _ThreadReplyPainter extends CustomPainter {
   const _ThreadReplyPainter({
     this.context,

packages/stream_chat_flutter/lib/src/quoted_message_widget.dart

@@ -1,9 +1,9 @@
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
+import 'package:stream_chat_flutter/src/extension.dart';
+import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';
 import 'package:video_player/video_player.dart';
-import 'package:stream_chat_flutter/stream_chat_flutter.dart';
-import 'package:stream_chat_flutter/src/extension.dart';
 
 /// Widget builder for quoted message attachment thumnail
 typedef QuotedMessageAttachmentThumbnailBuilder = Widget Function(
@@ -217,7 +217,7 @@ class QuotedMessageWidget extends StatelessWidget {
     }
     child = AbsorbPointer(child: child);
     return Material(
-      clipBehavior: Clip.antiAlias,
+      clipBehavior: Clip.hardEdge,
       type: MaterialType.transparency,
       shape: attachment.type == 'file' ? null : _getDefaultShape(context),
       child: child,

packages/stream_chat_flutter/lib/src/reaction_picker.dart

@@ -1,5 +1,3 @@
-import 'dart:math';
-
 import 'package:ezanimation/ezanimation.dart';
 import 'package:flutter/material.dart';
 import 'package:stream_chat_flutter/src/extension.dart';
@@ -50,95 +48,90 @@ class _ReactionPickerState extends State<ReactionPicker>
       triggerAnimations();
     }
 
-    return TweenAnimationBuilder<double>(
+    final child = Material(
-        tween: Tween(begin: 0, end: 1),
+      borderRadius: BorderRadius.circular(24),
-        curve: Curves.easeInOutBack,
+      color: chatThemeData.colorTheme.white,
-        duration: const Duration(milliseconds: 500),
+      clipBehavior: Clip.hardEdge,
-        builder: (context, val, wid) => Transform.scale(
+      child: Padding(
-              scale: val,
+        padding: const EdgeInsets.symmetric(
-              child: Material(
+          horizontal: 16,
-                borderRadius: BorderRadius.circular(24),
+          vertical: 8,
-                color: chatThemeData.colorTheme.white,
+        ),
-                clipBehavior: Clip.hardEdge,
+        child: Row(
-                child: Padding(
+          crossAxisAlignment: CrossAxisAlignment.start,
-                  padding: const EdgeInsets.symmetric(
+          mainAxisAlignment: MainAxisAlignment.end,
-                    horizontal: 16,
+          mainAxisSize: MainAxisSize.min,
-                    vertical: 8,
+          children: reactionIcons
-                  ),
+              .map<Widget>((reactionIcon) {
-                  child: Row(
+                final ownReactionIndex = widget.message.ownReactions
-                    crossAxisAlignment: CrossAxisAlignment.start,
+                        ?.indexWhere(
-                    mainAxisAlignment: MainAxisAlignment.end,
+                            (reaction) => reaction.type == reactionIcon.type) ??
-                    mainAxisSize: MainAxisSize.min,
+                    -1;
-                    children: reactionIcons
+                final index = reactionIcons.indexOf(reactionIcon);
-                        .map<Widget>((reactionIcon) {
-                          final ownReactionIndex = widget.message.ownReactions
-                                  ?.indexWhere((reaction) =>
-                                      reaction.type == reactionIcon.type) ??
-                              -1;
-                          final index = reactionIcons.indexOf(reactionIcon);
 
-                          return ConstrainedBox(
+                final child = StreamSvgIcon(
-                            constraints: const BoxConstraints.tightFor(
+                  assetName: reactionIcon.assetName,
-                              height: 24,
+                  color: ownReactionIndex != -1
-                              width: 24,
+                      ? chatThemeData.colorTheme.accentBlue
-                            ),
+                      : Theme.of(context).iconTheme.color!.withOpacity(.5),
-                            child: RawMaterialButton(
+                );
-                              elevation: 0,
+
-                              shape: ContinuousRectangleBorder(
+                return ConstrainedBox(
-                                borderRadius: BorderRadius.circular(16),
+                  constraints: const BoxConstraints.tightFor(
-                              ),
+                    height: 24,
-                              constraints: const BoxConstraints.tightFor(
+                    width: 24,
-                                height: 24,
-                                width: 24,
-                              ),
-                              onPressed: () {
-                                if (ownReactionIndex != -1) {
-                                  removeReaction(
-                                    context,
-                                    widget.message
-                                        .ownReactions![ownReactionIndex],
-                                  );
-                                } else {
-                                  sendReaction(
-                                    context,
-                                    reactionIcon.type,
-                                  );
-                                }
-                              },
-                              child: AnimatedBuilder(
-                                  animation: animations[index],
-                                  builder: (context, val) => Transform.scale(
-                                        scale: animations[index].value,
-                                        child: StreamSvgIcon(
-                                          assetName: reactionIcon.assetName,
-                                          height: max(
-                                            0,
-                                            animations[index].value * 24.0,
-                                          ),
-                                          width: max(
-                                            0,
-                                            animations[index].value * 24.0,
-                                          ),
-                                          color: ownReactionIndex != -1
-                                              ? chatThemeData
-                                                  .colorTheme.accentBlue
-                                              : Theme.of(context)
-                                                  .iconTheme
-                                                  .color!
-                                                  .withOpacity(.5),
-                                        ),
-                                      )),
-                            ),
-                          );
-                        })
-                        .insertBetween(const SizedBox(
-                          width: 16,
-                        ))
-                        .toList(),
                   ),
-                ),
+                  child: RawMaterialButton(
-              ),
+                    elevation: 0,
-            ));
+                    shape: ContinuousRectangleBorder(
+                      borderRadius: BorderRadius.circular(16),
+                    ),
+                    constraints: const BoxConstraints.tightFor(
+                      height: 24,
+                      width: 24,
+                    ),
+                    onPressed: () {
+                      if (ownReactionIndex != -1) {
+                        removeReaction(
+                          context,
+                          widget.message.ownReactions![ownReactionIndex],
+                        );
+                      } else {
+                        sendReaction(
+                          context,
+                          reactionIcon.type,
+                        );
+                      }
+                    },
+                    child: AnimatedBuilder(
+                      animation: animations[index],
+                      builder: (context, child) => Transform.scale(
+                        scale: animations[index].value,
+                        child: child,
+                      ),
+                      child: child,
+                    ),
+                  ),
+                );
+              })
+              .insertBetween(const SizedBox(
+                width: 16,
+              ))
+              .toList(),
+        ),
+      ),
+    );
+
+    return TweenAnimationBuilder<double>(
+      tween: Tween(begin: 0, end: 1),
+      curve: Curves.easeInOutBack,
+      duration: const Duration(milliseconds: 500),
+      builder: (context, val, widget) => Transform.scale(
+        scale: val,
+        child: widget,
+      ),
+      child: child,
+    );
   }
 
   void triggerAnimations() async {

packages/stream_chat_flutter/lib/src/typing_indicator.dart

@@ -1,10 +1,9 @@
 import 'package:flutter/material.dart';
 import 'package:lottie/lottie.dart';
-import 'package:stream_chat_flutter/src/utils.dart';
 import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';
 
 /// Widget to show the current list of typing users
-class TypingIndicator extends StatelessWidget {
+class TypingIndicator extends StatefulWidget {
   /// Instantiate a new TypingIndicator
   const TypingIndicator({
     Key? key,
@@ -30,16 +29,21 @@ class TypingIndicator extends StatelessWidget {
   /// Alignment of the typing indicator
   final Alignment alignment;
 
+  @override
+  _TypingIndicatorState createState() => _TypingIndicatorState();
+}
+
+class _TypingIndicatorState extends State<TypingIndicator> {
   @override
   Widget build(BuildContext context) {
     final channelState =
-        channel?.state ?? StreamChannel.of(context).channel.state!;
+        widget.channel?.state ?? StreamChannel.of(context).channel.state!;
 
     final altWidget = Align(
       key: const Key('alternative'),
-      alignment: alignment,
+      alignment: widget.alignment,
       child: Container(
-        child: alternativeWidget ?? const Offstage(),
+        child: widget.alternativeWidget ?? const Offstage(),
       ),
     );
     return BetterStreamBuilder<List<User>>(
@@ -49,10 +53,11 @@ class TypingIndicator extends StatelessWidget {
         duration: const Duration(milliseconds: 300),
         child: snapshot.isNotEmpty == true
             ? Padding(
-                padding: padding,
+                key: const Key('main'),
+                padding: widget.padding,
                 child: Align(
                   key: const Key('typings'),
-                  alignment: alignment,
+                  alignment: widget.alignment,
                   child: Row(
                     mainAxisSize: MainAxisSize.min,
                     children: [
@@ -65,7 +70,7 @@ class TypingIndicator extends StatelessWidget {
                         // ignore: lines_longer_than_80_chars
                         '  ${snapshot[0].name}${snapshot.length == 1 ? '' : ' and ${snapshot.length - 1} more'} ${snapshot.length == 1 ? 'is' : 'are'} typing',
                         maxLines: 1,
-                        style: style,
+                        style: widget.style,
                       ),
                     ],
                   ),

packages/stream_chat_flutter/lib/src/url_attachment.dart

@@ -40,7 +40,7 @@ class UrlAttachment extends StatelessWidget {
         children: [
           if (urlAttachment.imageUrl != null)
             Container(
-              clipBehavior: Clip.antiAliasWithSaveLayer,
+              clipBehavior: Clip.hardEdge,
               margin: const EdgeInsets.symmetric(horizontal: 8),
               decoration: BoxDecoration(
                 borderRadius: BorderRadius.circular(8),

packages/stream_chat_flutter/lib/src/utils.dart

@@ -334,7 +334,7 @@ Widget wrapAttachmentWidget(
   bool reverse,
 ) =>
     Material(
-      clipBehavior: Clip.antiAlias,
+      clipBehavior: Clip.hardEdge,
       shape: attachmentShape,
       type: MaterialType.transparency,
       child: attachmentWidget,

packages/stream_chat_flutter_core/lib/src/better_stream_builder.dart

@@ -25,29 +25,31 @@ class BetterStreamBuilder<T> extends StatefulWidget {
 }
 
 class _BetterStreamBuilderState<T> extends State<BetterStreamBuilder<T>> {
-  Widget? _child;
   T? _lastEvent;
   StreamSubscription? _subscription;
   Object? _lastError;
 
   @override
-  Widget build(BuildContext context) => _child ?? const Offstage();
+  Widget build(BuildContext context) {
+    if (_lastError != null) {
+      return widget.errorBuilder!(context, _lastError!);
+    }
+
+    if (_lastEvent == null) {
+      return widget.loadingBuilder?.call(context) ?? const Offstage();
+    }
+    return widget.builder(context, _lastEvent ?? widget.initialData);
+  }
 
   bool _firstTime = true;
   @override
   void didChangeDependencies() {
     if (_firstTime) {
-      if (widget.initialData == null && widget.loadingBuilder != null) {
-        _child = widget.loadingBuilder!(context);
-      } else {
-        _onEvent(widget.initialData);
-      }
       _lastEvent = widget.initialData;
       _subscription = widget.stream?.listen(
         _onEvent,
         onError: _onError,
       );
-
       _firstTime = false;
     }
     super.didChangeDependencies();
@@ -55,12 +57,6 @@ class _BetterStreamBuilderState<T> extends State<BetterStreamBuilder<T>> {
 
   @override
   void didUpdateWidget(covariant BetterStreamBuilder<T> oldWidget) {
-    if (_lastError != null && oldWidget.errorBuilder != widget.errorBuilder) {
-      _onError(_lastError);
-    } else if (oldWidget.builder != widget.builder) {
-      _onEvent(_lastEvent);
-    }
-
     if (oldWidget.stream != widget.stream) {
       _subscription?.cancel();
       _subscription = widget.stream?.listen(
@@ -79,21 +75,22 @@ class _BetterStreamBuilderState<T> extends State<BetterStreamBuilder<T>> {
 
   void _onError(error) {
     if (widget.errorBuilder != null && error != _lastError) {
-      setState(() {
+      if (mounted) {
-        _child = widget.errorBuilder!(context, error);
+        setState(() {});
-      });
+      }
       _lastError = error;
     }
   }
 
-  void _onEvent(event) {
+  void _onEvent(T event) {
     _lastError = null;
-    if (widget.comparator != null
+    final isEqual = widget.comparator != null
         ? widget.comparator!(_lastEvent, event)
-        : event != _lastEvent) {
+        : event == _lastEvent;
-      setState(() {
+    if (!isEqual) {
-        _child = widget.builder(context, event);
+      if (mounted) {
-      });
+        setState(() {});
+      }
       _lastEvent = event;
     }
   }

packages/stream_chat_flutter_core/lib/src/stream_channel.dart

@@ -346,36 +346,40 @@ class StreamChannelState extends State<StreamChannel> {
 
   @override
   Widget build(BuildContext context) {
-    Widget child = FutureBuilder<List<bool>>(
+    var child = widget.child;
-      future: Future.wait(_futures),
+    if (widget.showLoading &&
-      initialData: [
+        (initialMessageId != null || channel.state == null)) {
-        channel.state != null,
+      child = FutureBuilder<List<bool>>(
-        if (initialMessageId != null) false,
+        future: Future.wait(_futures),
-      ],
+        initialData: [
-      builder: (context, snapshot) {
+          channel.state != null,
-        if (snapshot.hasError) {
+          if (initialMessageId != null) false,
-          var message = snapshot.error.toString();
+        ],
-          if (snapshot.error is DioError) {
+        builder: (context, snapshot) {
-            final dioError = snapshot.error as DioError?;
+          if (snapshot.hasError) {
-            if (dioError?.type == DioErrorType.response) {
+            var message = snapshot.error.toString();
-              message = dioError!.message;
+            if (snapshot.error is DioError) {
-            } else {
+              final dioError = snapshot.error as DioError?;
-              message = 'Check your connection and retry';
+              if (dioError?.type == DioErrorType.response) {
+                message = dioError!.message;
+              } else {
+                message = 'Check your connection and retry';
+              }
             }
+            return Center(child: Text(message));
           }
-          return Center(child: Text(message));
+          final initialized = snapshot.data![0];
-        }
+          final dataLoaded = initialMessageId == null || snapshot.data![1];
-        final initialized = snapshot.data![0];
+          if (!initialized || !dataLoaded) {
-        // ignore: avoid_bool_literals_in_conditional_expressions
+            return const Center(
-        final dataLoaded = initialMessageId == null ? true : snapshot.data![1];
+              child: CircularProgressIndicator(),
-        if (widget.showLoading && (!initialized || !dataLoaded)) {
+            );
-          return const Center(
+          }
-            child: CircularProgressIndicator(),
+          return widget.child;
-          );
+        },
-        }
+      );
-        return widget.child;
+    }
-      },
+
-    );
     if (initialMessageId != null) {
       child = Material(child: child);
     }