Merge pull request #449 from GetStream/perf

fix: perf fixes

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

@@ -70,8 +70,11 @@ class Channel {
       true;
 
   /// Returns true if the channel is muted as a stream
-  Stream<bool>? get isMutedStream => _client.state.userStream.map((event) =>
+  Stream<bool>? get isMutedStream => _client.state.userStream
-      event!.channelMutes.any((element) => element.channel.cid == cid) == true);
+      .map((event) =>
+          event!.channelMutes.any((element) => element.channel.cid == cid) ==
+          true)
+      .distinct();
 
   /// True if the channel is a group
   bool get isGroup => memberCount != 2;
@@ -1645,7 +1648,7 @@ class ChannelClientState {
   /// Channel message list as a stream
   Stream<List<Message>?> get messagesStream => channelStateStream
       .map((cs) => cs.messages)
-      .distinct((prev, next) => const ListEquality().equals(prev, next));
+      .distinct(const ListEquality().equals);
 
   /// Channel pinned message list
   List<Message>? get pinnedMessages => _channelState.pinnedMessages.toList();
@@ -1675,7 +1678,7 @@ class ChannelClientState {
         _channel.client.state.usersStream,
         (members, users) =>
             members!.map((e) => e!.copyWith(user: users[e.user!.id])).toList(),
-      );
+      ).distinct(const ListEquality().equals);
 
   /// Channel watcher count
   int? get watcherCount => _channelState.watcherCount;
@@ -1706,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;
@@ -1845,7 +1848,9 @@ class ChannelClientState {
   List<User> get typingEvents => _typingEventsController.value;
 
   /// Channel related typing users stream
-  Stream<List<User>> get typingEventsStream => _typingEventsController.stream;
+  Stream<List<User>> get typingEventsStream =>
+      _typingEventsController.stream.distinct(const ListEquality().equals);
+
   final BehaviorSubject<List<User>> _typingEventsController =
       BehaviorSubject.seeded([]);
 

packages/stream_chat/lib/src/client.dart

@@ -213,13 +213,13 @@ class StreamChatClient {
       _wsConnectionStatusController.add(status);
 
   /// The current status value of the websocket connection
-  ConnectionStatus? get wsConnectionStatus =>
+  ConnectionStatus get wsConnectionStatus =>
       _wsConnectionStatusController.value;
 
   /// This notifies the connection status of the websocket connection.
   /// Listen to this to get notified when the websocket tries to reconnect.
   Stream<ConnectionStatus> get wsConnectionStatusStream =>
-      _wsConnectionStatusController.stream;
+      _wsConnectionStatusController.stream.distinct();
 
   /// The current user token
   String? token;
@@ -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/lib/src/models/member.dart

@@ -1,3 +1,4 @@
+import 'package:equatable/equatable.dart';
 import 'package:json_annotation/json_annotation.dart';
 import 'package:stream_chat/src/models/user.dart';
 
@@ -6,7 +7,7 @@ part 'member.g.dart';
 /// The class that contains the information about the user membership
 /// in a channel
 @JsonSerializable()
-class Member {
+class Member extends Equatable {
   /// Constructor used for json serialization
   Member({
     this.user,
@@ -98,4 +99,19 @@ class Member {
 
   /// Serialize to json
   Map<String, dynamic> toJson() => _$MemberToJson(this);
+
+  @override
+  List<Object?> get props => [
+        user,
+        inviteAcceptedAt,
+        inviteRejectedAt,
+        invited,
+        role,
+        userId,
+        isModerator,
+        banned,
+        shadowBanned,
+        createdAt,
+        updatedAt,
+      ];
 }

packages/stream_chat/lib/src/models/user.dart

@@ -1,3 +1,4 @@
+import 'package:equatable/equatable.dart';
 import 'package:json_annotation/json_annotation.dart';
 import 'package:stream_chat/src/models/serialization.dart';
 
@@ -5,7 +6,7 @@ part 'user.g.dart';
 
 /// The class that defines the user model
 @JsonSerializable()
-class User {
+class User extends Equatable {
   /// Constructor used for json serialization
   User({
     required this.id,
@@ -125,4 +126,17 @@ class User {
         banned: banned ?? this.banned,
         teams: teams ?? this.teams,
       );
+
+  @override
+  List<Object?> get props => [
+        id,
+        role,
+        teams,
+        createdAt,
+        updatedAt,
+        lastActive,
+        online,
+        banned,
+        extraData,
+      ];
 }

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

@@ -83,26 +83,28 @@ class ChannelImage extends StatelessWidget {
   Widget build(BuildContext context) {
     final streamChat = StreamChat.of(context);
     final channel = this.channel ?? StreamChannel.of(context).channel;
-    return StreamBuilder<Map<String, dynamic>>(
+    return BetterStreamBuilder<Map<String, dynamic>>(
       stream: channel.extraDataStream,
       initialData: channel.extraData,
-      builder: (context, snapshot) {
+      builder: (context, data) {
         String? image;
         final chatThemeData = StreamChatTheme.of(context);
-        if (snapshot.data!.containsKey('image') == true) {
+        if (data.containsKey('image') == true) {
-          image = snapshot.data!['image'];
+          image = data['image'];
         } 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(
+              builder: (context, user) => UserAvatar(
                     borderRadius: borderRadius ??
                         chatThemeData
                             .channelPreviewTheme.avatarTheme?.borderRadius,
-                    user: snapshot.data ?? otherMember.user!,
+                    user: user ?? otherMember.user!,
                     constraints: constraints ??
                         chatThemeData
                             .channelPreviewTheme.avatarTheme?.constraints,
@@ -153,9 +155,7 @@ class ChannelImage extends StatelessWidget {
                     imageUrl: image,
                     errorWidget: (_, __, ___) => Center(
                       child: Text(
-                        snapshot.data?.containsKey('name') ?? false
+                        data.containsKey('name') ? data['name'][0] : '',
-                            ? snapshot.data!['name'][0]
-                            : '',
                         style: TextStyle(
                           color: chatThemeData.colorTheme.white,
                           fontWeight: FontWeight.bold,

packages/stream_chat_flutter/lib/src/channel_info.dart

@@ -25,14 +25,14 @@ class ChannelInfo extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final client = StreamChat.of(context).client;
-    return StreamBuilder<List<Member>>(
+    return BetterStreamBuilder<List<Member>>(
-      stream: channel.state?.membersStream,
+      stream: channel.state!.membersStream,
-      initialData: channel.state?.members,
+      initialData: channel.state!.members,
-      builder: (context, snapshot) => ConnectionStatusBuilder(
+      builder: (context, data) => ConnectionStatusBuilder(
         statusBuilder: (context, status) {
           switch (status) {
             case ConnectionStatus.connected:
-              return _buildConnectedTitleState(context, snapshot.data);
+              return _buildConnectedTitleState(context, data);
             case ConnectionStatus.connecting:
               return _buildConnectingTitleState(context);
             case ConnectionStatus.disconnected:

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(
@@ -465,104 +461,105 @@ class _ChannelListViewState extends State<ChannelListView> {
 
   Widget _listItemBuilder(BuildContext context, int i, List<Channel> channels) {
     final channelsBloc = ChannelsBloc.of(context);
+    final onTap = _getChannelTap(context);
+    final chatThemeData = StreamChatTheme.of(context);
+    final backgroundColor = chatThemeData.colorTheme.whiteSmoke;
+
     if (i < channels.length) {
       final channel = channels[i];
-      final onTap = _getChannelTap(context);
 
-      final chatThemeData = StreamChatTheme.of(context);
-      final backgroundColor = chatThemeData.colorTheme.whiteSmoke;
       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),
+                ),
           ),
         ),
       );
@@ -636,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
@@ -652,17 +647,15 @@ class _ChannelListViewState extends State<ChannelListView> {
                     child: Text('Error loading channels'),
                   ),
                 ),
-              );
+              ),
-            }
+          builder: (context, data) => data
-            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_name.dart

@@ -26,11 +26,11 @@ class ChannelName extends StatelessWidget {
     final client = StreamChat.of(context);
     final channel = StreamChannel.of(context).channel;
 
-    return StreamBuilder<Map<String, dynamic>>(
+    return BetterStreamBuilder<Map<String, Object?>>(
       stream: channel.extraDataStream,
       initialData: channel.extraData,
-      builder: (context, snapshot) => _buildName(
+      builder: (context, data) => _buildName(
-        snapshot.data!,
+        data,
         channel.state?.members,
         client,
       ),

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, data) => AnimatedOpacity(
-              opacity: snapshot.data! ? 0.5 : 1,
+              opacity: data ? 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,
-                      builder: (context, snapshot) {
+                      comparator: const ListEquality().equals,
-                        if (!snapshot.hasData ||
+                      builder: (context, members) {
-                            snapshot.data!.isEmpty ||
+                        if (members?.isEmpty == true ||
-                            !snapshot.data!.any((Member e) =>
+                            members?.any((Member e) =>
-                                e.user!.id == channel.client.state.user?.id)) {
+                                    e.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) {
+        builder: (context, data) {
-          if (!snapshot.hasData) {
+          if (data == null) {
-            return const SizedBox();
+            return const Offstage();
           }
-          final lastMessageAt = snapshot.data!.toLocal();
+          final lastMessageAt = data.toLocal();
 
           String stringDate;
           final now = DateTime.now();
@@ -219,12 +222,12 @@ 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) {
+        builder: (context, data) {
-          final lastMessage = snapshot.data
+          final lastMessage =
-              ?.lastWhereOrNull((m) => m.shadowed != true && !m.isDeleted);
+              data?.lastWhereOrNull((m) => m.shadowed != true && !m.isDeleted);
           if (lastMessage == null) {
             return const SizedBox();
           }

packages/stream_chat_flutter/lib/src/connection_status_builder.dart

@@ -12,15 +12,11 @@ class ConnectionStatusBuilder extends StatelessWidget {
   const ConnectionStatusBuilder({
     Key? key,
     required this.statusBuilder,
-    this.initialStatus = ConnectionStatus.disconnected,
     this.connectionStatusStream,
     this.errorBuilder,
     this.loadingBuilder,
   }) : super(key: key);
 
-  /// The connection status that will be used to create the initial snapshot.
-  final ConnectionStatus initialStatus;
-
   /// The asynchronous computation to which this builder is currently connected.
   final Stream<ConnectionStatus>? connectionStatusStream;
 
@@ -38,22 +34,18 @@ class ConnectionStatusBuilder extends StatelessWidget {
   Widget build(BuildContext context) {
     final stream = connectionStatusStream ??
         StreamChat.of(context).client.wsConnectionStatusStream;
-    return StreamBuilder<ConnectionStatus>(
+    final client = StreamChat.of(context).client;
-      initialData: initialStatus,
+    return BetterStreamBuilder<ConnectionStatus>(
+      initialData: client.wsConnectionStatus,
       stream: stream,
-      builder: (context, snapshot) {
+      loadingBuilder: loadingBuilder,
-        if (snapshot.hasError) {
+      errorBuilder: (context, error) {
-          if (errorBuilder != null) {
+        if (errorBuilder != null) {
-            return errorBuilder!(context, snapshot.error);
+          return errorBuilder!(context, error);
-          }
-          return const Offstage();
         }
-        if (!snapshot.hasData) {
+        return const Offstage();
-          if (loadingBuilder != null) return loadingBuilder!(context);
-          return const Offstage();
-        }
-        return statusBuilder(context, snapshot.data!);
       },
+      builder: statusBuilder,
     );
   }
 }

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/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,
@@ -440,6 +439,7 @@ class _MessageListViewState extends State<MessageListView> {
                   physics: widget.scrollPhysics,
                   itemScrollController: _scrollController,
                   reverse: true,
+                  addAutomaticKeepAlives: false,
                   itemCount:
                       messages.length + 2 + (_isThreadConversation ? 1 : 0),
                   separatorBuilder: (context, i) {
@@ -447,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),
@@ -458,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,
                           ),
                         ),
@@ -570,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();
@@ -620,8 +628,8 @@ class _MessageListViewState extends State<MessageListView> {
 
   Widget _buildScrollToBottom() => StreamBuilder<Tuple2<bool, int>>(
         stream: Rx.combineLatest2(
-          streamChannel!.channel.state!.isUpToDateStream,
+          streamChannel!.channel.state!.isUpToDateStream.distinct(),
-          streamChannel!.channel.state!.unreadCountStream,
+          streamChannel!.channel.state!.unreadCountStream.distinct(),
           (bool isUpToDate, int unreadCount) => Tuple2(isUpToDate, unreadCount),
         ),
         builder: (_, snapshot) {
@@ -639,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,
@@ -649,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();
@@ -668,7 +675,7 @@ class _MessageListViewState extends State<MessageListView> {
                     }
                   },
                   child: StreamSvgIcon.down(
-                    color: chatThemeData.colorTheme.black,
+                    color: _streamTheme.colorTheme.black,
                   ),
                 ),
                 if (showUnreadCount)
@@ -699,44 +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 StreamBuilder<bool>(
+        streamChannel: streamChannel,
-      key: const Key('LOADING-INDICATOR'),
+        isThreadConversation: _isThreadConversation,
-      stream: stream,
+      );
-      initialData: false,
-      builder: (context, snapshot) {
-        if (snapshot.hasError) {
-          return Container(
-            color: StreamChatTheme.of(context)
-                .colorTheme
-                .accentRed
-                .withOpacity(.2),
-            child: const Center(
-              child: Text('Error loading messages'),
-            ),
-          );
-        }
-        if (!snapshot.data!) {
-          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,
@@ -803,7 +779,9 @@ class _MessageListViewState extends State<MessageListView> {
           }
         }
         if (mounted) {
-          setState(() => _showScrollToBottom = !isVisible);
+          if (_showScrollToBottom == isVisible) {
+            setState(() => _showScrollToBottom = !isVisible);
+          }
         }
       },
       child: messageWidget,
@@ -820,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,
@@ -849,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) {
@@ -964,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,
@@ -1051,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,
@@ -1093,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,
         ),
@@ -1103,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?>(
@@ -1133,6 +1109,8 @@ class _MessageListViewState extends State<MessageListView> {
     _scrollController = widget.scrollController ?? ItemScrollController();
     _itemPositionListener =
         widget.itemPositionListener ?? ItemPositionsListener.create();
+    _itemPositionStream =
+        _valueListenableToStreamAdapter(_itemPositionListener.itemPositions);
 
     _getOnThreadTap();
     super.initState();
@@ -1141,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;
@@ -1186,14 +1165,14 @@ class _MessageListViewState extends State<MessageListView> {
         Navigator.push(
           context,
           MaterialPageRoute(
-            builder: (_) => StreamBuilder<Message>(
+            builder: (_) => BetterStreamBuilder<Message>(
               stream: streamChannel!.channel.state!.messagesStream.map(
                   (messages) =>
                       messages!.firstWhere((m) => m.id == message.id)),
               initialData: message,
-              builder: (_, snapshot) => StreamChannel(
+              builder: (_, data) => StreamChannel(
                 channel: streamChannel!.channel,
-                child: widget.threadBuilder!(context, snapshot.data),
+                child: widget.threadBuilder!(context, data),
               ),
             ),
           ),
@@ -1211,3 +1190,79 @@ 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, data) {
+        if (!data) {
+          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) {
+  // ignore: close_sinks
+  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

@@ -33,13 +33,22 @@ class TypingIndicator extends StatelessWidget {
   Widget build(BuildContext context) {
     final channelState =
         channel?.state ?? StreamChannel.of(context).channel.state!;
-    return StreamBuilder<List<User>>(
+
+    final altWidget = Align(
+      key: const Key('alternative'),
+      alignment: alignment,
+      child: Container(
+        child: alternativeWidget ?? const Offstage(),
+      ),
+    );
+    return BetterStreamBuilder<List<User>>(
       initialData: channelState.typingEvents,
       stream: channelState.typingEventsStream,
-      builder: (context, snapshot) => AnimatedSwitcher(
+      builder: (context, data) => AnimatedSwitcher(
         duration: const Duration(milliseconds: 300),
-        child: snapshot.data?.isNotEmpty == true
+        child: data.isNotEmpty == true
             ? Padding(
+                key: const Key('main'),
                 padding: padding,
                 child: Align(
                   key: const Key('typings'),
@@ -54,7 +63,7 @@ class TypingIndicator extends StatelessWidget {
                       ),
                       Text(
                         // ignore: lines_longer_than_80_chars
-                        '  ${snapshot.data![0].name}${snapshot.data!.length == 1 ? '' : ' and ${snapshot.data!.length - 1} more'} ${snapshot.data!.length == 1 ? 'is' : 'are'} typing',
+                        '  ${data[0].name}${data.length == 1 ? '' : ' and ${data.length - 1} more'} ${data.length == 1 ? 'is' : 'are'} typing',
                         maxLines: 1,
                         style: style,
                       ),
@@ -62,13 +71,7 @@ class TypingIndicator extends StatelessWidget {
                   ),
                 ),
               )
-            : Align(
+            : altWidget,
-                key: const Key('alternative'),
-                alignment: alignment,
-                child: Container(
-                  child: alternativeWidget ?? const Offstage(),
-                ),
-              ),
       ),
     );
   }

packages/stream_chat_flutter/lib/src/unread_indicator.dart

@@ -17,16 +17,16 @@ class UnreadIndicator extends StatelessWidget {
   Widget build(BuildContext context) {
     final client = StreamChat.of(context).client;
     return IgnorePointer(
-      child: StreamBuilder<int?>(
+      child: BetterStreamBuilder<int?>(
         stream: cid != null
             ? client.state.channels[cid]?.state?.unreadCountStream
             : client.state.totalUnreadCountStream,
         initialData: cid != null
             ? client.state.channels[cid]?.state?.unreadCount
             : client.state.totalUnreadCount,
-        builder: (context, snapshot) {
+        builder: (context, data) {
-          if (!snapshot.hasData || snapshot.data == 0) {
+          if (data == null || data == 0) {
-            return const SizedBox();
+            return const Offstage();
           }
           return Material(
             borderRadius: BorderRadius.circular(8),
@@ -42,7 +42,7 @@ class UnreadIndicator extends StatelessWidget {
               ),
               child: Center(
                 child: Text(
-                  '${snapshot.data! > 99 ? '99+' : snapshot.data}',
+                  '${data > 99 ? '99+' : data}',
                   style: const TextStyle(
                     fontSize: 11,
                     color: Colors.white,

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

@@ -1,3 +1,5 @@
+import 'dart:async';
+
 import 'package:flutter/material.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';
@@ -332,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/test/src/channel_header_test.dart

@@ -107,6 +107,8 @@ void main() {
       ]);
       when(() => client.wsConnectionStatusStream)
           .thenAnswer((_) => Stream.value(ConnectionStatus.disconnected));
+      when(() => client.wsConnectionStatus)
+          .thenReturn(ConnectionStatus.disconnected);
       when(() => clientState.totalUnreadCountStream)
           .thenAnswer((i) => Stream.value(1));
 

packages/stream_chat_flutter/test/src/message_input_test.dart

@@ -53,15 +53,6 @@ void main() {
             )
           ]));
 
-      when(() => channelState.typingEvents).thenAnswer((i) => [
-            User(id: 'other-user', extraData: {'name': 'demo'})
-          ]);
-      when(() => channelState.typingEventsStream)
-          .thenAnswer((i) => Stream.value([
-                User(id: 'other-user', extraData: {'name': 'demo'}),
-                User(id: 'other-user', extraData: {'name': 'demo'}),
-              ]));
-
       await tester.pumpWidget(MaterialApp(
         home: StreamChat(
           client: client,
@@ -75,7 +66,6 @@ void main() {
       ));
 
       expect(find.byType(TextField), findsOneWidget);
-      expect(find.byType(StreamSvgIcon), findsNWidgets(8));
       expect(find.byKey(const Key('messageInputText')), findsOneWidget);
     },
   );

packages/stream_chat_flutter/test/src/mocks.dart

@@ -2,7 +2,11 @@ import 'package:flutter/material.dart';
 import 'package:mocktail/mocktail.dart';
 import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';
 
-class MockClient extends Mock implements StreamChatClient {}
+class MockClient extends Mock implements StreamChatClient {
+  MockClient() {
+    when(() => wsConnectionStatus).thenReturn(ConnectionStatus.connected);
+  }
+}
 
 class MockClientState extends Mock implements ClientState {}
 
@@ -17,7 +21,12 @@ class MockChannel extends Mock implements Channel {
   }
 }
 
-class MockChannelState extends Mock implements ChannelClientState {}
+class MockChannelState extends Mock implements ChannelClientState {
+  MockChannelState() {
+    when(() => typingEvents).thenReturn([]);
+    when(() => typingEventsStream).thenAnswer((_) => Stream.value([]));
+  }
+}
 
 class MockNavigatorObserver extends Mock implements NavigatorObserver {}
 

packages/stream_chat_flutter/test/src/unread_indicator_test.dart

@@ -83,7 +83,7 @@ void main() {
         ),
       ));
 
-      expect(find.byType(SizedBox), findsOneWidget);
+      expect(find.text('0'), findsNothing);
     },
   );
 

packages/stream_chat_flutter_core/lib/src/better_stream_builder.dart

@@ -0,0 +1,109 @@
+import 'dart:async';
+
+import 'package:flutter/widgets.dart';
+
+/// A more efficient [StreamBuilder]
+/// It requires [initialData] and will rebuild
+/// only when the new data is different than the current data
+/// The [comparator] is used to check if the new data is different
+class BetterStreamBuilder<T> extends StatefulWidget {
+  /// Creates a new BetterStreamBuilder
+  const BetterStreamBuilder({
+    required this.stream,
+    required this.initialData,
+    required this.builder,
+    this.loadingBuilder,
+    this.errorBuilder,
+    this.comparator,
+    Key? key,
+  }) : super(key: key);
+
+  /// The stream to listen to
+  final Stream<T>? stream;
+
+  /// The initial data available
+  final T initialData;
+
+  /// Comparator used to check if the new data is different than the last one
+  final bool Function(T?, T)? comparator;
+
+  /// Builder that builds based on the new snapshot
+  final Widget Function(BuildContext context, T data) builder;
+
+  /// Builder that builds when the data is null
+  final Widget Function(BuildContext context)? loadingBuilder;
+
+  /// Builder used when there is an error
+  final Widget Function(BuildContext context, Object error)? errorBuilder;
+
+  @override
+  _BetterStreamBuilderState createState() => _BetterStreamBuilderState<T>();
+}
+
+class _BetterStreamBuilderState<T> extends State<BetterStreamBuilder<T>> {
+  T? _lastEvent;
+  StreamSubscription? _subscription;
+  Object? _lastError;
+
+  @override
+  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);
+  }
+
+  @override
+  void initState() {
+    _lastEvent = widget.initialData;
+    _subscription = widget.stream?.listen(
+      _onEvent,
+      onError: _onError,
+    );
+    super.initState();
+  }
+
+  @override
+  void didUpdateWidget(covariant BetterStreamBuilder<T> oldWidget) {
+    if (oldWidget.stream != widget.stream) {
+      _subscription?.cancel();
+      _subscription = widget.stream?.listen(
+        _onEvent,
+        onError: _onError,
+      );
+    }
+    super.didUpdateWidget(oldWidget);
+  }
+
+  @override
+  void dispose() {
+    _subscription?.cancel();
+    super.dispose();
+  }
+
+  void _onError(error) {
+    if (widget.errorBuilder != null && error != _lastError) {
+      if (mounted) {
+        setState(() {});
+      }
+      _lastError = error;
+    }
+  }
+
+  void _onEvent(T event) {
+    _lastError = null;
+    final isEqual = widget.comparator != null
+        ? widget.comparator!(_lastEvent, event)
+        : event == _lastEvent;
+    if (!isEqual) {
+      if (mounted) {
+        setState(() {});
+      }
+      _lastEvent = event;
+    }
+  }
+}

packages/stream_chat_flutter_core/lib/src/message_list_core.dart

@@ -1,9 +1,11 @@
 import 'dart:async';
 
+import 'package:collection/collection.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:stream_chat/stream_chat.dart';
+import 'package:stream_chat_flutter_core/src/better_stream_builder.dart';
 import 'package:stream_chat_flutter_core/src/stream_channel.dart';
 import 'package:stream_chat_flutter_core/src/typedef.dart';
 
@@ -127,6 +129,10 @@ class MessageListCoreState extends State<MessageListCore> {
             .map((threads) => threads[widget.parentMessage!.id])
         : _streamChannel!.channel.state?.messagesStream;
 
+    final initialData = _isThreadConversation
+        ? _streamChannel!.channel.state?.threads[widget.parentMessage!.id]
+        : _streamChannel!.channel.state?.messages;
+
     bool defaultFilter(Message m) {
       final isMyMessage = m.user?.id == _currentUser?.id;
       final isDeletedOrShadowed = m.isDeleted == true || m.shadowed == true;
@@ -134,28 +140,27 @@ class MessageListCoreState extends State<MessageListCore> {
       return true;
     }
 
-    return StreamBuilder<List<Message>?>(
+    return BetterStreamBuilder<List<Message>?>(
-      stream: messagesStream?.map((messages) =>
+      initialData: initialData,
-          messages?.where(widget.messageFilter ?? defaultFilter).toList(
+      comparator: const ListEquality().equals,
-                growable: false,
+      stream: messagesStream!.map(
-              )),
+        (messages) =>
-      builder: (context, snapshot) {
+            messages?.where(widget.messageFilter ?? defaultFilter).toList(
-        if (snapshot.hasError) {
+                  growable: false,
-          return widget.errorWidgetBuilder(context, snapshot.error!);
+                ),
-        } else if (!snapshot.hasData) {
+      ),
-          return widget.loadingBuilder(context);
+      errorBuilder: widget.errorWidgetBuilder,
-        } else {
+      loadingBuilder: widget.loadingBuilder,
-          final messageList =
+      builder: (context, data) {
-              snapshot.data?.reversed.toList(growable: false) ?? [];
+        final messageList = data?.reversed.toList(growable: false) ?? [];
-          if (messageList.isEmpty && !_isThreadConversation) {
+        if (messageList.isEmpty && !_isThreadConversation) {
-            if (_upToDate) {
+          if (_upToDate) {
-              return widget.emptyBuilder(context);
+            return widget.emptyBuilder(context);
-            }
-          } else {
-            _messages = messageList;
           }
-          return widget.messageListBuilder(context, _messages);
+        } else {
+          _messages = messageList;
         }
+        return widget.messageListBuilder(context, _messages);
       },
     );
   }

packages/stream_chat_flutter_core/lib/stream_chat_flutter_core.dart

@@ -3,6 +3,7 @@ library stream_chat_flutter_core;
 export 'package:connectivity_plus/connectivity_plus.dart';
 export 'package:stream_chat/stream_chat.dart';
 
+export 'src/better_stream_builder.dart';
 export 'src/channel_list_core.dart' hide ChannelListCoreState;
 export 'src/channels_bloc.dart';
 export 'src/lazy_load_scroll_view.dart';

packages/stream_chat_flutter_core/test/message_list_core_test.dart

@@ -100,6 +100,7 @@ void main() {
       when(() => mockChannel.state.isUpToDate).thenReturn(true);
       when(() => mockChannel.state.messagesStream)
           .thenAnswer((_) => Stream.value([]));
+      when(() => mockChannel.state.messages).thenReturn([]);
 
       await tester.pumpWidget(
         StreamChannel(
@@ -133,6 +134,7 @@ void main() {
       when(() => mockChannel.state.isUpToDate).thenReturn(true);
       when(() => mockChannel.state.messagesStream)
           .thenAnswer((_) => Stream.value([]));
+      when(() => mockChannel.state.messages).thenReturn([]);
       when(() => mockChannel.initialized).thenAnswer((_) => Future.value(true));
 
       await tester.pumpWidget(
@@ -174,6 +176,7 @@ void main() {
       when(() => mockChannel.state.messages).thenReturn(messages);
       when(() => mockChannel.state.messagesStream)
           .thenAnswer((_) => Stream.value(messages));
+      when(() => mockChannel.state.messages).thenReturn(messages);
       when(() => mockChannel.initialized).thenAnswer((_) => Future.value(true));
 
       await tester.pumpWidget(
@@ -220,6 +223,7 @@ void main() {
       const error = 'Error! Error! Error!';
       when(() => mockChannel.state.messagesStream)
           .thenAnswer((_) => Stream.error(error));
+      when(() => mockChannel.state.messages).thenReturn([]);
 
       await tester.pumpWidget(
         Directionality(
@@ -259,6 +263,7 @@ void main() {
       const messages = <Message>[];
       when(() => mockChannel.state.messagesStream)
           .thenAnswer((_) => Stream.value(messages));
+      when(() => mockChannel.state.messages).thenReturn(messages);
 
       await tester.pumpWidget(
         Directionality(
@@ -305,6 +310,7 @@ void main() {
       const messages = <Message>[];
       when(() => mockChannel.state.messagesStream)
           .thenAnswer((_) => Stream.value(messages));
+      when(() => mockChannel.state.messages).thenReturn(messages);
 
       await tester.pumpWidget(
         Directionality(
@@ -349,6 +355,7 @@ void main() {
       final messages = _generateMessages();
       when(() => mockChannel.state.messagesStream)
           .thenAnswer((_) => Stream.value(messages));
+      when(() => mockChannel.state.messages).thenReturn(messages);
 
       await tester.pumpWidget(
         Directionality(

packages/stream_chat_flutter_core/test/mocks.dart

@@ -4,6 +4,10 @@ import 'package:stream_chat/stream_chat.dart';
 class MockLogger extends Mock implements Logger {}
 
 class MockClient extends Mock implements StreamChatClient {
+  MockClient() {
+    when(() => wsConnectionStatus).thenReturn(ConnectionStatus.connected);
+  }
+
   @override
   final Logger logger = MockLogger();
 

packages/stream_chat_flutter_core/test/stream_chat_core_test.dart

@@ -235,6 +235,14 @@ void main() {
         final mockClient = MockClient();
         const streamChatCoreKey = Key('streamChatCore');
         const childKey = Key('child');
+
+        final event = Event();
+        when(() => mockClient.on()).thenAnswer((_) => Stream.value(event));
+        when(() => mockClient.connect()).thenAnswer((_) async => event);
+        when(() => mockClient.disconnect()).thenAnswer((_) async => null);
+        when(() => mockClient.wsConnectionStatus)
+            .thenReturn(ConnectionStatus.disconnected);
+
         final streamChatCore = StreamChatCore(
           key: streamChatCoreKey,
           client: mockClient,
@@ -247,13 +255,6 @@ void main() {
         expect(find.byKey(streamChatCoreKey), findsOneWidget);
         expect(find.byKey(childKey), findsOneWidget);
 
-        final event = Event();
-        when(() => mockClient.on()).thenAnswer((_) => Stream.value(event));
-        when(() => mockClient.connect()).thenAnswer((_) async => event);
-        when(mockClient.disconnect).thenAnswer((_) async => null);
-        when(() => mockClient.wsConnectionStatus)
-            .thenReturn(ConnectionStatus.disconnected);
-
         final streamChatCoreState = tester.state<StreamChatCoreState>(
           find.byKey(streamChatCoreKey),
         );
@@ -323,6 +324,14 @@ void main() {
         const childKey = Key('child');
         final _connectivityController =
             BehaviorSubject.seeded(ConnectivityResult.none);
+
+        final event = Event();
+        when(() => mockClient.on()).thenAnswer((_) => Stream.value(event));
+        when(() => mockClient.connect()).thenAnswer((_) async => event);
+        when(() => mockClient.disconnect()).thenAnswer((_) async => null);
+        when(() => mockClient.wsConnectionStatus)
+            .thenReturn(ConnectionStatus.disconnected);
+
         final streamChatCore = StreamChatCore(
           key: streamChatCoreKey,
           client: mockClient,
@@ -335,13 +344,6 @@ void main() {
         expect(find.byKey(streamChatCoreKey), findsOneWidget);
         expect(find.byKey(childKey), findsOneWidget);
 
-        final event = Event();
-        when(() => mockClient.on()).thenAnswer((_) => Stream.value(event));
-        when(() => mockClient.connect()).thenAnswer((_) async => event);
-        when(mockClient.disconnect).thenAnswer((_) async => null);
-        when(() => mockClient.wsConnectionStatus)
-            .thenReturn(ConnectionStatus.disconnected);
-
         _connectivityController.add(ConnectivityResult.mobile);
 
         await Future.delayed(const Duration(seconds: 1));
@@ -397,6 +399,14 @@ void main() {
         const childKey = Key('child');
         final _connectivityController =
             BehaviorSubject.seeded(ConnectivityResult.none);
+
+        final event = Event();
+        when(() => mockClient.on()).thenAnswer((_) => Stream.value(event));
+        when(() => mockClient.connect()).thenAnswer((_) async => event);
+        when(() => mockClient.disconnect()).thenAnswer((_) async => null);
+        when(() => mockClient.wsConnectionStatus)
+            .thenReturn(ConnectionStatus.disconnected);
+
         final streamChatCore = StreamChatCore(
           key: streamChatCoreKey,
           client: mockClient,
@@ -409,13 +419,6 @@ void main() {
         expect(find.byKey(streamChatCoreKey), findsOneWidget);
         expect(find.byKey(childKey), findsOneWidget);
 
-        final event = Event();
-        when(() => mockClient.on()).thenAnswer((_) => Stream.value(event));
-        when(() => mockClient.connect()).thenAnswer((_) async => event);
-        when(mockClient.disconnect).thenAnswer((_) async => null);
-        when(() => mockClient.wsConnectionStatus)
-            .thenReturn(ConnectionStatus.disconnected);
-
         final streamChatCoreState = tester.state<StreamChatCoreState>(
           find.byKey(streamChatCoreKey),
         );