Merge branches 'develop' and 'rfac/transform' of https://github.com/GetStream/stream-chat-flutter into rfac/transform

 Conflicts:

	packages/stream_chat_flutter/lib/src/deleted_message.dart

	packages/stream_chat_flutter/lib/src/message_widget.dart

packages/stream_chat/example/lib/main.dart

@@ -79,21 +79,21 @@ class HomeScreen extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final messages = channel.state!.channelStateStream;
+    final messages = channel.state!.messagesStream;
     return Scaffold(
       appBar: AppBar(
         title: Text('Channel: ${channel.id}'),
       ),
       body: SafeArea(
-        child: StreamBuilder<ChannelState?>(
+        child: StreamBuilder<List<Message>?>(
           stream: messages,
           builder: (
             BuildContext context,
-            AsyncSnapshot<ChannelState?> snapshot,
+            AsyncSnapshot<List<Message>?> snapshot,
           ) {
             if (snapshot.hasData && snapshot.data != null) {
               return MessageView(
-                messages: snapshot.data!.messages.reversed.toList(),
+                messages: snapshot.data!.reversed.toList(),
                 channel: channel,
               );
             } else if (snapshot.hasError) {

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

@@ -2,7 +2,8 @@ import 'dart:async';
 import 'dart:convert';
 import 'dart:math';
 
-import 'package:collection/collection.dart' show IterableExtension;
+import 'package:collection/collection.dart'
+    show IterableExtension, ListEquality;
 import 'package:dio/dio.dart';
 import 'package:logging/logging.dart';
 import 'package:rxdart/rxdart.dart';
@@ -1601,8 +1602,9 @@ class ChannelClientState {
   List<Message> get messages => _channelState.messages;
 
   /// Channel message list as a stream
-  Stream<List<Message>?> get messagesStream =>
+  Stream<List<Message>?> get messagesStream => channelStateStream
-      channelStateStream.map((cs) => cs.messages);
+      .map((cs) => cs.messages)
+      .distinct((prev, next) => const ListEquality().equals(prev, next));
 
   /// Channel pinned message list
   List<Message>? get pinnedMessages => _channelState.pinnedMessages.toList();

packages/stream_chat_flutter/lib/src/channel_bottom_sheet.dart

@@ -17,18 +17,22 @@ class ChannelBottomSheet extends StatefulWidget {
 class _ChannelBottomSheetState extends State<ChannelBottomSheet> {
   bool _showActions = true;
 
+  late StreamChannelState _streamChannelState;
+  late StreamChatThemeData _streamChatThemeData;
+  late StreamChatState _streamChatState;
+
   @override
   Widget build(BuildContext context) {
-    final channel = StreamChannel.of(context).channel;
+    final channel = _streamChannelState.channel;
 
     final members = channel.state?.members ?? [];
 
-    final userAsMember = members
+    final userAsMember =
-        .firstWhere((e) => e.user?.id == StreamChat.of(context).user?.id);
+        members.firstWhere((e) => e.user?.id == _streamChatState.user?.id);
     final isOwner = userAsMember.role == 'owner';
 
     return Material(
-      color: StreamChatTheme.of(context).colorTheme.white,
+      color: _streamChatThemeData.colorTheme.white,
       clipBehavior: Clip.antiAlias,
       shape: const RoundedRectangleBorder(
         borderRadius: BorderRadius.only(
@@ -48,8 +52,7 @@ class _ChannelBottomSheetState extends State<ChannelBottomSheet> {
                   child: Padding(
                     padding: const EdgeInsets.symmetric(horizontal: 16),
                     child: ChannelName(
-                      textStyle:
+                      textStyle: _streamChatThemeData.textTheme.headlineBold,
-                          StreamChatTheme.of(context).textTheme.headlineBold,
                     ),
                   ),
                 ),
@@ -59,10 +62,9 @@ class _ChannelBottomSheetState extends State<ChannelBottomSheet> {
                 Center(
                   child: ChannelInfo(
                     showTypingIndicator: false,
-                    channel: StreamChannel.of(context).channel,
+                    channel: _streamChannelState.channel,
-                    textStyle: StreamChatTheme.of(context)
+                    textStyle:
-                        .channelPreviewTheme
+                        _streamChatThemeData.channelPreviewTheme.subtitle,
-                        .subtitle,
                   ),
                 ),
                 const SizedBox(
@@ -94,8 +96,7 @@ class _ChannelBottomSheetState extends State<ChannelBottomSheet> {
                                 .user
                                 ?.name ??
                             '',
-                        style:
+                        style: _streamChatThemeData.textTheme.footnoteBold,
-                            StreamChatTheme.of(context).textTheme.footnoteBold,
                         maxLines: 1,
                         overflow: TextOverflow.ellipsis,
                       ),
@@ -128,9 +129,8 @@ class _ChannelBottomSheetState extends State<ChannelBottomSheet> {
                             ),
                             Text(
                               members[index].user?.name ?? '',
-                              style: StreamChatTheme.of(context)
+                              style:
-                                  .textTheme
+                                  _streamChatThemeData.textTheme.footnoteBold,
-                                  .footnoteBold,
                               maxLines: 1,
                               overflow: TextOverflow.ellipsis,
                             ),
@@ -146,7 +146,7 @@ class _ChannelBottomSheetState extends State<ChannelBottomSheet> {
                   leading: Padding(
                     padding: const EdgeInsets.symmetric(horizontal: 16),
                     child: StreamSvgIcon.user(
-                      color: StreamChatTheme.of(context).colorTheme.grey,
+                      color: _streamChatThemeData.colorTheme.grey,
                     ),
                   ),
                   title: 'View Info',
@@ -157,7 +157,7 @@ class _ChannelBottomSheetState extends State<ChannelBottomSheet> {
                     leading: Padding(
                       padding: const EdgeInsets.symmetric(horizontal: 16),
                       child: StreamSvgIcon.userRemove(
-                        color: StreamChatTheme.of(context).colorTheme.grey,
+                        color: _streamChatThemeData.colorTheme.grey,
                       ),
                     ),
                     title: 'Leave Group',
@@ -176,12 +176,11 @@ class _ChannelBottomSheetState extends State<ChannelBottomSheet> {
                     leading: Padding(
                       padding: const EdgeInsets.symmetric(horizontal: 16),
                       child: StreamSvgIcon.delete(
-                        color: StreamChatTheme.of(context).colorTheme.accentRed,
+                        color: _streamChatThemeData.colorTheme.accentRed,
                       ),
                     ),
                     title: 'Delete Conversation',
-                    titleColor:
+                    titleColor: _streamChatThemeData.colorTheme.accentRed,
-                        StreamChatTheme.of(context).colorTheme.accentRed,
                     onTap: () async {
                       setState(() {
                         _showActions = false;
@@ -196,7 +195,7 @@ class _ChannelBottomSheetState extends State<ChannelBottomSheet> {
                   leading: Padding(
                     padding: const EdgeInsets.symmetric(horizontal: 16),
                     child: StreamSvgIcon.closeSmall(
-                      color: StreamChatTheme.of(context).colorTheme.grey,
+                      color: _streamChatThemeData.colorTheme.grey,
                     ),
                   ),
                   title: 'Cancel',
@@ -209,6 +208,14 @@ class _ChannelBottomSheetState extends State<ChannelBottomSheet> {
     );
   }
 
+  @override
+  void didChangeDependencies() {
+    _streamChannelState = StreamChannel.of(context);
+    _streamChatThemeData = StreamChatTheme.of(context);
+    _streamChatState = StreamChat.of(context);
+    super.didChangeDependencies();
+  }
+
   Future<void> _showDeleteDialog() async {
     final res = await showConfirmationDialog(
       context,
@@ -217,10 +224,10 @@ class _ChannelBottomSheetState extends State<ChannelBottomSheet> {
       question: 'Are you sure you want to delete this conversation?',
       cancelText: 'CANCEL',
       icon: StreamSvgIcon.delete(
-        color: StreamChatTheme.of(context).colorTheme.accentRed,
+        color: _streamChatThemeData.colorTheme.accentRed,
       ),
     );
-    final channel = StreamChannel.of(context).channel;
+    final channel = _streamChannelState.channel;
     if (res == true) {
       await channel.delete();
       Navigator.pop(context);
@@ -235,12 +242,12 @@ class _ChannelBottomSheetState extends State<ChannelBottomSheet> {
       question: 'Are you sure you want to leave this conversation?',
       cancelText: 'CANCEL',
       icon: StreamSvgIcon.userRemove(
-        color: StreamChatTheme.of(context).colorTheme.accentRed,
+        color: _streamChatThemeData.colorTheme.accentRed,
       ),
     );
     if (res == true) {
-      final channel = StreamChannel.of(context).channel;
+      final channel = _streamChannelState.channel;
-      final user = StreamChat.of(context).user;
+      final user = _streamChatState.user;
       if (user != null) {
         await channel.removeMembers([user.id]);
       }

packages/stream_chat_flutter/lib/src/channel_header.dart

@@ -104,6 +104,7 @@ class ChannelHeader extends StatelessWidget implements PreferredSizeWidget {
   @override
   Widget build(BuildContext context) {
     final channel = StreamChannel.of(context).channel;
+    final chatThemeData = StreamChatTheme.of(context);
 
     final leadingWidget = leading ??
         (showBackButton
@@ -139,26 +140,18 @@ class ChannelHeader extends StatelessWidget implements PreferredSizeWidget {
             brightness: Theme.of(context).brightness,
             elevation: 1,
             leading: leadingWidget,
-            backgroundColor: StreamChatTheme.of(context)
+            backgroundColor:
-                .channelTheme
+                chatThemeData.channelTheme.channelHeaderTheme.color,
-                .channelHeaderTheme
-                .color,
             actions: actions ??
                 <Widget>[
                   Padding(
                     padding: const EdgeInsets.only(right: 10),
                     child: Center(
                       child: ChannelImage(
-                        borderRadius: StreamChatTheme.of(context)
+                        borderRadius: chatThemeData.channelTheme
-                            .channelTheme
+                            .channelHeaderTheme.avatarTheme?.borderRadius,
-                            .channelHeaderTheme
+                        constraints: chatThemeData.channelTheme
-                            .avatarTheme
+                            .channelHeaderTheme.avatarTheme?.constraints,
-                            ?.borderRadius,
-                        constraints: StreamChatTheme.of(context)
-                            .channelTheme
-                            .channelHeaderTheme
-                            .avatarTheme
-                            ?.constraints,
                         onTap: onImageTap,
                       ),
                     ),
@@ -175,20 +168,16 @@ class ChannelHeader extends StatelessWidget implements PreferredSizeWidget {
                   children: <Widget>[
                     title ??
                         ChannelName(
-                          textStyle: StreamChatTheme.of(context)
+                          textStyle: chatThemeData
-                              .channelTheme
+                              .channelTheme.channelHeaderTheme.title,
-                              .channelHeaderTheme
-                              .title,
                         ),
                     const SizedBox(height: 2),
                     subtitle ??
                         ChannelInfo(
                           showTypingIndicator: showTypingIndicator,
                           channel: channel,
-                          textStyle: StreamChatTheme.of(context)
+                          textStyle: chatThemeData
-                              .channelTheme
+                              .channelTheme.channelHeaderTheme.subtitle,
-                              .channelHeaderTheme
-                              .subtitle,
                         ),
                   ],
                 ),

packages/stream_chat_flutter/lib/src/channel_image.dart

@@ -88,6 +88,7 @@ class ChannelImage extends StatelessWidget {
       initialData: channel.extraData,
       builder: (context, snapshot) {
         String? image;
+        final chatThemeData = StreamChatTheme.of(context);
         if (snapshot.data!.containsKey('image') == true) {
           image = snapshot.data!['image'];
         } else if (channel.state?.members.length == 2) {
@@ -99,20 +100,16 @@ class ChannelImage extends StatelessWidget {
               initialData: otherMember!.user,
               builder: (context, snapshot) => UserAvatar(
                     borderRadius: borderRadius ??
-                        StreamChatTheme.of(context)
+                        chatThemeData
-                            .channelPreviewTheme
+                            .channelPreviewTheme.avatarTheme?.borderRadius,
-                            .avatarTheme
-                            ?.borderRadius,
                     user: snapshot.data ?? otherMember.user!,
                     constraints: constraints ??
-                        StreamChatTheme.of(context)
+                        chatThemeData
-                            .channelPreviewTheme
+                            .channelPreviewTheme.avatarTheme?.constraints,
-                            .avatarTheme
-                            ?.constraints,
                     onTap: onTap != null ? (_) => onTap!() : null,
                     selected: selected,
-                    selectionColor: selectionColor ??
+                    selectionColor:
-                        StreamChatTheme.of(context).colorTheme.accentBlue,
+                        selectionColor ?? chatThemeData.colorTheme.accentBlue,
                     selectionThickness: selectionThickness,
                   ));
         } else {
@@ -127,37 +124,25 @@ class ChannelImage extends StatelessWidget {
           return GroupImage(
             images: images ?? [],
             borderRadius: borderRadius ??
-                StreamChatTheme.of(context)
+                chatThemeData.channelPreviewTheme.avatarTheme?.borderRadius,
-                    .channelPreviewTheme
-                    .avatarTheme
-                    ?.borderRadius,
             constraints: constraints ??
-                StreamChatTheme.of(context)
+                chatThemeData.channelPreviewTheme.avatarTheme?.constraints,
-                    .channelPreviewTheme
-                    .avatarTheme
-                    ?.constraints,
             onTap: onTap,
             selected: selected,
-            selectionColor: selectionColor ??
+            selectionColor:
-                StreamChatTheme.of(context).colorTheme.accentBlue,
+                selectionColor ?? chatThemeData.colorTheme.accentBlue,
             selectionThickness: selectionThickness,
           );
         }
 
         Widget child = ClipRRect(
           borderRadius: borderRadius ??
-              StreamChatTheme.of(context)
+              chatThemeData.channelPreviewTheme.avatarTheme?.borderRadius,
-                  .channelPreviewTheme
-                  .avatarTheme
-                  ?.borderRadius,
           child: Container(
             constraints: constraints ??
-                StreamChatTheme.of(context)
+                chatThemeData.channelPreviewTheme.avatarTheme?.constraints,
-                    .channelPreviewTheme
-                    .avatarTheme
-                    ?.constraints,
             decoration: BoxDecoration(
-              color: StreamChatTheme.of(context).colorTheme.accentBlue,
+              color: chatThemeData.colorTheme.accentBlue,
             ),
             child: Stack(
               alignment: Alignment.center,
@@ -172,7 +157,7 @@ class ChannelImage extends StatelessWidget {
                             ? snapshot.data!['name'][0]
                             : '',
                         style: TextStyle(
-                          color: StreamChatTheme.of(context).colorTheme.white,
+                          color: chatThemeData.colorTheme.white,
                           fontWeight: FontWeight.bold,
                         ),
                       ),
@@ -180,7 +165,7 @@ class ChannelImage extends StatelessWidget {
                     fit: BoxFit.cover,
                   )
                 else
-                  StreamChatTheme.of(context).defaultChannelImage(
+                  chatThemeData.defaultChannelImage(
                     context,
                     channel,
                   ),
@@ -198,20 +183,13 @@ class ChannelImage extends StatelessWidget {
           child = ClipRRect(
             key: const Key('selectedImage'),
             borderRadius: (borderRadius ??
-                    StreamChatTheme.of(context)
+                    chatThemeData.ownMessageTheme.avatarTheme?.borderRadius ??
-                        .ownMessageTheme
-                        .avatarTheme
-                        ?.borderRadius ??
                     BorderRadius.zero) +
                 BorderRadius.circular(selectionThickness),
             child: Container(
               constraints: constraints ??
-                  StreamChatTheme.of(context)
+                  chatThemeData.ownMessageTheme.avatarTheme?.constraints,
-                      .ownMessageTheme
+              color: selectionColor ?? chatThemeData.colorTheme.accentBlue,
-                      .avatarTheme
-                      ?.constraints,
-              color: selectionColor ??
-                  StreamChatTheme.of(context).colorTheme.accentBlue,
               child: Padding(
                 padding: EdgeInsets.all(selectionThickness),
                 child: child,

packages/stream_chat_flutter/lib/src/channel_info.dart

@@ -46,7 +46,9 @@ class ChannelInfo extends StatelessWidget {
   }
 
   Widget _buildConnectedTitleState(
-      BuildContext context, List<Member>? members) {
+    BuildContext context,
+    List<Member>? members,
+  ) {
     Widget? alternativeWidget;
 
     if (channel.memberCount != null && channel.memberCount! > 2) {
@@ -61,8 +63,9 @@ class ChannelInfo extends StatelessWidget {
             .subtitle,
       );
     } else {
+      final userId = StreamChat.of(context).user?.id;
       final otherMember = members?.firstWhereOrNull(
-        (element) => element.userId != StreamChat.of(context).user?.id,
+        (element) => element.userId != userId,
       );
 
       if (otherMember != null) {

packages/stream_chat_flutter/lib/src/channel_list_header.dart

@@ -114,6 +114,7 @@ class ChannelListHeader extends StatelessWidget implements PreferredSizeWidget {
             break;
         }
 
+        final chatThemeData = StreamChatTheme.of(context);
         return InfoTile(
           // ignore: avoid_bool_literals_in_conditional_expressions
           showMessage: showConnectionStateTile ? showStatus : false,
@@ -121,8 +122,7 @@ class ChannelListHeader extends StatelessWidget implements PreferredSizeWidget {
           child: AppBar(
             brightness: Theme.of(context).brightness,
             elevation: 1,
-            backgroundColor:
+            backgroundColor: chatThemeData.channelListHeaderTheme.color,
-                StreamChatTheme.of(context).channelListHeaderTheme.color,
             centerTitle: true,
             leading: leading ??
                 Center(
@@ -137,14 +137,10 @@ class ChannelListHeader extends StatelessWidget implements PreferredSizeWidget {
                                 }
                                 Scaffold.of(context).openDrawer();
                               },
-                          borderRadius: StreamChatTheme.of(context)
+                          borderRadius: chatThemeData
-                              .channelListHeaderTheme
+                              .channelListHeaderTheme.avatarTheme?.borderRadius,
-                              .avatarTheme
+                          constraints: chatThemeData
-                              ?.borderRadius,
+                              .channelListHeaderTheme.avatarTheme?.constraints,
-                          constraints: StreamChatTheme.of(context)
-                              .channelListHeaderTheme
-                              .avatarTheme
-                              ?.constraints,
                         )
                       : const Offstage(),
                 ),
@@ -157,9 +153,7 @@ class ChannelListHeader extends StatelessWidget implements PreferredSizeWidget {
                           Color? color;
                           switch (status) {
                             case ConnectionStatus.connected:
-                              color = StreamChatTheme.of(context)
+                              color = chatThemeData.colorTheme.accentBlue;
-                                  .colorTheme
-                                  .accentBlue;
                               break;
                             case ConnectionStatus.connecting:
                               color = Colors.grey;
@@ -209,12 +203,15 @@ class ChannelListHeader extends StatelessWidget implements PreferredSizeWidget {
     );
   }
 
-  Widget _buildConnectedTitleState(BuildContext context) => Text(
+  Widget _buildConnectedTitleState(BuildContext context) {
+    final chatThemeData = StreamChatTheme.of(context);
+    return Text(
       'Stream Chat',
-        style: StreamChatTheme.of(context).textTheme.headlineBold.copyWith(
+      style: chatThemeData.textTheme.headlineBold.copyWith(
-              color: StreamChatTheme.of(context).colorTheme.black,
+        color: chatThemeData.colorTheme.black,
       ),
     );
+  }
 
   Widget _buildConnectingTitleState(BuildContext context) => Row(
         mainAxisAlignment: MainAxisAlignment.center,
@@ -243,16 +240,14 @@ class ChannelListHeader extends StatelessWidget implements PreferredSizeWidget {
   Widget _buildDisconnectedTitleState(
     BuildContext context,
     StreamChatClient client,
-  ) =>
+  ) {
-      Row(
+    final chatThemeData = StreamChatTheme.of(context);
+    return Row(
       mainAxisAlignment: MainAxisAlignment.center,
       children: [
         Text(
           'Offline...',
-            style: StreamChatTheme.of(context)
+          style: chatThemeData.channelListHeaderTheme.title?.copyWith(
-                .channelListHeaderTheme
-                .title
-                ?.copyWith(
             fontSize: 16,
             fontWeight: FontWeight.bold,
           ),
@@ -264,18 +259,16 @@ class ChannelListHeader extends StatelessWidget implements PreferredSizeWidget {
           },
           child: Text(
             'Try Again',
-              style: StreamChatTheme.of(context)
+            style: chatThemeData.channelListHeaderTheme.title?.copyWith(
-                  .channelListHeaderTheme
-                  .title
-                  ?.copyWith(
               fontSize: 16,
               fontWeight: FontWeight.bold,
-                    color: StreamChatTheme.of(context).colorTheme.accentBlue,
+              color: chatThemeData.colorTheme.accentBlue,
             ),
           ),
         ),
       ],
     );
+  }
 
   @override
   Size get preferredSize => const Size.fromHeight(kToolbarHeight);

packages/stream_chat_flutter/lib/src/channel_list_view.dart

@@ -237,7 +237,9 @@ class _ChannelListViewState extends State<ChannelListView> {
   }
 
   Widget _buildEmptyWidget(BuildContext context) => LayoutBuilder(
-        builder: (context, viewportConstraints) => SingleChildScrollView(
+        builder: (context, viewportConstraints) {
+          final chatThemeData = StreamChatTheme.of(context);
+          return SingleChildScrollView(
             physics: const AlwaysScrollableScrollPhysics(),
             child: Stack(
               children: [
@@ -252,16 +254,14 @@ class _ChannelListViewState extends State<ChannelListView> {
                         padding: const EdgeInsets.all(8),
                         child: StreamSvgIcon.message(
                           size: 136,
-                        color: StreamChatTheme.of(context)
+                          color: chatThemeData.colorTheme.greyGainsboro,
-                            .colorTheme
-                            .greyGainsboro,
                         ),
                       ),
                       Padding(
                         padding: const EdgeInsets.all(8),
                         child: Text(
                           'Let’s start chatting!',
-                        style: StreamChatTheme.of(context).textTheme.headline,
+                          style: chatThemeData.textTheme.headline,
                         ),
                       ),
                       Padding(
@@ -272,12 +272,8 @@ class _ChannelListViewState extends State<ChannelListView> {
                         child: Text(
                           'How about sending your first message to a friend?',
                           textAlign: TextAlign.center,
-                        style: StreamChatTheme.of(context)
+                          style: chatThemeData.textTheme.body.copyWith(
-                            .textTheme
+                            color: chatThemeData.colorTheme.grey,
-                            .body
-                            .copyWith(
-                              color:
-                                  StreamChatTheme.of(context).colorTheme.grey,
                           ),
                         ),
                       ),
@@ -294,13 +290,8 @@ class _ChannelListViewState extends State<ChannelListView> {
                         onPressed: widget.onStartChatPressed,
                         child: Text(
                           'Start a chat',
-                        style: StreamChatTheme.of(context)
+                          style: chatThemeData.textTheme.bodyBold.copyWith(
-                            .textTheme
+                            color: chatThemeData.colorTheme.accentBlue,
-                            .bodyBold
-                            .copyWith(
-                              color: StreamChatTheme.of(context)
-                                  .colorTheme
-                                  .accentBlue,
                           ),
                         ),
                       ),
@@ -308,7 +299,8 @@ class _ChannelListViewState extends State<ChannelListView> {
                   ),
               ],
             ),
-        ),
+          );
+        },
       );
 
   Widget _buildLoadingWidget(BuildContext context) => ListView(
@@ -331,10 +323,11 @@ class _ChannelListViewState extends State<ChannelListView> {
       );
 
   Shimmer _buildLoadingItem(BuildContext context) {
+    final chatThemeData = StreamChatTheme.of(context);
     if (widget.crossAxisCount > 1) {
       return Shimmer.fromColors(
-        baseColor: StreamChatTheme.of(context).colorTheme.greyGainsboro,
+        baseColor: chatThemeData.colorTheme.greyGainsboro,
-        highlightColor: StreamChatTheme.of(context).colorTheme.whiteSmoke,
+        highlightColor: chatThemeData.colorTheme.whiteSmoke,
         child: Column(
           children: [
             const SizedBox(height: 4),
@@ -362,12 +355,12 @@ class _ChannelListViewState extends State<ChannelListView> {
       );
     } else {
       return Shimmer.fromColors(
-        baseColor: StreamChatTheme.of(context).colorTheme.greyGainsboro,
+        baseColor: chatThemeData.colorTheme.greyGainsboro,
-        highlightColor: StreamChatTheme.of(context).colorTheme.whiteSmoke,
+        highlightColor: chatThemeData.colorTheme.whiteSmoke,
         child: ListTile(
           leading: Container(
             decoration: BoxDecoration(
-              color: StreamChatTheme.of(context).colorTheme.white,
+              color: chatThemeData.colorTheme.white,
               shape: BoxShape.circle,
             ),
             constraints: const BoxConstraints.tightFor(
@@ -383,7 +376,7 @@ class _ChannelListViewState extends State<ChannelListView> {
             alignment: Alignment.centerLeft,
             child: Container(
               decoration: BoxDecoration(
-                color: StreamChatTheme.of(context).colorTheme.white,
+                color: chatThemeData.colorTheme.white,
                 borderRadius: BorderRadius.circular(11),
               ),
               constraints: const BoxConstraints.tightFor(
@@ -400,7 +393,7 @@ class _ChannelListViewState extends State<ChannelListView> {
                   alignment: Alignment.centerLeft,
                   child: Container(
                     decoration: BoxDecoration(
-                      color: StreamChatTheme.of(context).colorTheme.white,
+                      color: chatThemeData.colorTheme.white,
                       borderRadius: BorderRadius.circular(11),
                     ),
                     constraints: const BoxConstraints.expand(
@@ -412,7 +405,7 @@ class _ChannelListViewState extends State<ChannelListView> {
               Container(
                 margin: const EdgeInsets.only(left: 16),
                 decoration: BoxDecoration(
-                  color: StreamChatTheme.of(context).colorTheme.white,
+                  color: chatThemeData.colorTheme.white,
                   borderRadius: BorderRadius.circular(11),
                 ),
                 constraints: const BoxConstraints.tightFor(
@@ -456,12 +449,13 @@ class _ChannelListViewState extends State<ChannelListView> {
       );
 
   Widget _listItemBuilder(BuildContext context, int i, List<Channel> channels) {
-    final channelsProvider = ChannelsBloc.of(context);
+    final channelsBloc = ChannelsBloc.of(context);
     if (i < channels.length) {
       final channel = channels[i];
       final onTap = _getChannelTap(context);
 
-      final backgroundColor = StreamChatTheme.of(context).colorTheme.whiteSmoke;
+      final chatThemeData = StreamChatTheme.of(context);
+      final backgroundColor = chatThemeData.colorTheme.whiteSmoke;
       return StreamChannel(
         key: ValueKey<String>('CHANNEL-${channel.id}'),
         channel: channel,
@@ -506,7 +500,7 @@ class _ChannelListViewState extends State<ChannelListView> {
                 IconSlideAction(
                   color: backgroundColor,
                   iconWidget: StreamSvgIcon.delete(
-                    color: StreamChatTheme.of(context).colorTheme.accentRed,
+                    color: chatThemeData.colorTheme.accentRed,
                   ),
                   onTap: () async {
                     final res = await showConfirmationDialog(
@@ -517,7 +511,7 @@ class _ChannelListViewState extends State<ChannelListView> {
                           'Are you sure you want to delete this conversation?',
                       cancelText: 'CANCEL',
                       icon: StreamSvgIcon.delete(
-                        color: StreamChatTheme.of(context).colorTheme.accentRed,
+                        color: chatThemeData.colorTheme.accentRed,
                       ),
                     );
                     if (res == true) {
@@ -527,7 +521,7 @@ class _ChannelListViewState extends State<ChannelListView> {
                 ),
             ],
             child: Container(
-              color: StreamChatTheme.of(context).colorTheme.whiteSnow,
+              color: chatThemeData.colorTheme.whiteSnow,
               child: widget.channelPreviewBuilder?.call(context, channel) ??
                   ChannelPreview(
                     onLongPress: widget.onChannelLongPress,
@@ -540,7 +534,7 @@ class _ChannelListViewState extends State<ChannelListView> {
         ),
       );
     } else {
-      return _buildQueryProgressIndicator(context, channelsProvider);
+      return _buildQueryProgressIndicator(context, channelsBloc);
     }
   }
 

packages/stream_chat_flutter/lib/src/channel_preview.dart

@@ -68,6 +68,8 @@ class ChannelPreview extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final channelPreviewTheme = StreamChatTheme.of(context).channelPreviewTheme;
+    final streamChatState = StreamChat.of(context);
+
     return StreamBuilder<bool>(
         stream: channel.isMutedStream,
         initialData: channel.isMuted,
@@ -130,7 +132,7 @@ class ChannelPreview extends StatelessWidget {
                               (m) => !m.isDeleted && m.shadowed != true,
                             );
                             if (lastMessage?.user?.id ==
-                                StreamChat.of(context).user?.id) {
+                                streamChatState.user?.id) {
                               return Padding(
                                 padding: const EdgeInsets.only(right: 4),
                                 child: SendingIndicator(
@@ -194,6 +196,7 @@ class ChannelPreview extends StatelessWidget {
       );
 
   Widget _buildSubtitle(BuildContext context) {
+    final chatThemeData = StreamChatTheme.of(context);
     if (channel.isMuted) {
       return Row(
         crossAxisAlignment: CrossAxisAlignment.end,
@@ -203,7 +206,7 @@ class ChannelPreview extends StatelessWidget {
           ),
           Text(
             '  Channel is muted',
-            style: StreamChatTheme.of(context).channelPreviewTheme.subtitle,
+            style: chatThemeData.channelPreviewTheme.subtitle,
           ),
         ],
       );
@@ -211,7 +214,7 @@ class ChannelPreview extends StatelessWidget {
     return TypingIndicator(
       channel: channel,
       alternativeWidget: _buildLastMessage(context),
-      style: StreamChatTheme.of(context).channelPreviewTheme.subtitle,
+      style: chatThemeData.channelPreviewTheme.subtitle,
     );
   }
 
@@ -245,30 +248,19 @@ class ChannelPreview extends StatelessWidget {
 
           text = parts.join(' ');
 
+          final chatThemeData = StreamChatTheme.of(context);
           return Text.rich(
             _getDisplayText(
               text,
               lastMessage.mentionedUsers,
               lastMessage.attachments,
-              StreamChatTheme.of(context)
+              chatThemeData.channelPreviewTheme.subtitle?.copyWith(
-                  .channelPreviewTheme
+                  color: chatThemeData.channelPreviewTheme.subtitle?.color,
-                  .subtitle
-                  ?.copyWith(
-                      color: StreamChatTheme.of(context)
-                          .channelPreviewTheme
-                          .subtitle
-                          ?.color,
                   fontStyle: (lastMessage.isSystem || lastMessage.isDeleted)
                       ? FontStyle.italic
                       : FontStyle.normal),
-              StreamChatTheme.of(context)
+              chatThemeData.channelPreviewTheme.subtitle?.copyWith(
-                  .channelPreviewTheme
+                color: chatThemeData.channelPreviewTheme.subtitle?.color,
-                  .subtitle
-                  ?.copyWith(
-                    color: StreamChatTheme.of(context)
-                        .channelPreviewTheme
-                        .subtitle
-                        ?.color,
                 fontStyle: (lastMessage.isSystem || lastMessage.isDeleted)
                     ? FontStyle.italic
                     : FontStyle.normal,

packages/stream_chat_flutter/lib/src/date_divider.dart

@@ -44,17 +44,18 @@ class DateDivider extends StatelessWidget {
 
     if (uppercase) dayInfo = dayInfo.toUpperCase();
 
+    final chatThemeData = StreamChatTheme.of(context);
     return Center(
       child: Container(
         padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 1),
         decoration: BoxDecoration(
-          color: StreamChatTheme.of(context).colorTheme.overlayDark,
+          color: chatThemeData.colorTheme.overlayDark,
           borderRadius: BorderRadius.circular(8),
         ),
         child: Text(
           dayInfo,
-          style: StreamChatTheme.of(context).textTheme.footnote.copyWith(
+          style: chatThemeData.textTheme.footnote.copyWith(
-                color: StreamChatTheme.of(context).colorTheme.white,
+            color: chatThemeData.colorTheme.white,
           ),
         ),
       ),

packages/stream_chat_flutter/lib/src/deleted_message.dart

@@ -31,7 +31,9 @@ class DeletedMessage extends StatelessWidget {
   final bool reverse;
 
   @override
-  Widget build(BuildContext context) => Material(
+  Widget build(BuildContext context) {
+    final chatThemeData = StreamChatTheme.of(context);
+    return Material(
       color: messageTheme.messageBackgroundColor,
       shape: shape ??
           RoundedRectangleBorder(
@@ -39,14 +41,8 @@ class DeletedMessage extends StatelessWidget {
             side: borderSide ??
                 BorderSide(
                   color: Theme.of(context).brightness == Brightness.dark
-                        ? StreamChatTheme.of(context)
+                      ? chatThemeData.colorTheme.white.withAlpha(24)
-                            .colorTheme
+                      : chatThemeData.colorTheme.black.withAlpha(24),
-                            .white
-                            .withAlpha(24)
-                        : StreamChatTheme.of(context)
-                            .colorTheme
-                            .black
-                            .withAlpha(24),
                 ),
           ),
       child: Padding(
@@ -64,3 +60,4 @@ class DeletedMessage extends StatelessWidget {
       ),
     );
   }
+}

packages/stream_chat_flutter/lib/src/group_image.dart

@@ -46,18 +46,12 @@ class GroupImage extends StatelessWidget {
       onTap: onTap,
       child: ClipRRect(
         borderRadius: borderRadius ??
-            StreamChatTheme.of(context)
+            streamChatTheme.ownMessageTheme.avatarTheme?.borderRadius,
-                .ownMessageTheme
-                .avatarTheme
-                ?.borderRadius,
         child: Container(
           constraints: constraints ??
-              StreamChatTheme.of(context)
+              streamChatTheme.ownMessageTheme.avatarTheme?.constraints,
-                  .ownMessageTheme
-                  .avatarTheme
-                  ?.constraints,
           decoration: BoxDecoration(
-            color: StreamChatTheme.of(context).colorTheme.accentBlue,
+            color: streamChatTheme.colorTheme.accentBlue,
           ),
           child: Flex(
             direction: Axis.vertical,
@@ -125,8 +119,7 @@ class GroupImage extends StatelessWidget {
                 BorderRadius.zero) +
             BorderRadius.circular(selectionThickness),
         child: Container(
-          color: selectionColor ??
+          color: selectionColor ?? streamChatTheme.colorTheme.accentBlue,
-              StreamChatTheme.of(context).colorTheme.accentBlue,
           height: 64,
           width: 64,
           child: Padding(

packages/stream_chat_flutter/lib/src/image_footer.dart

@@ -77,16 +77,18 @@ class _ImageFooterState extends State<ImageFooter> {
   @override
   Widget build(BuildContext context) {
     final showShareButton = !kIsWeb;
+    final mediaQueryData = MediaQuery.of(context);
+    final chatThemeData = StreamChatTheme.of(context);
     return SizedBox.fromSize(
       size: Size(
-        MediaQuery.of(context).size.width,
+        mediaQueryData.size.width,
-        MediaQuery.of(context).padding.bottom + widget.preferredSize.height,
+        mediaQueryData.padding.bottom + widget.preferredSize.height,
       ),
       child: MediaQuery.removePadding(
         context: context,
         removeTop: true,
         child: BottomAppBar(
-          color: StreamChatTheme.of(context).colorTheme.white,
+          color: chatThemeData.colorTheme.white,
           child: Row(
             mainAxisAlignment: MainAxisAlignment.spaceBetween,
             children: [
@@ -98,7 +100,7 @@ class _ImageFooterState extends State<ImageFooter> {
                 IconButton(
                   icon: StreamSvgIcon.iconShare(
                     size: 24,
-                    color: StreamChatTheme.of(context).colorTheme.black,
+                    color: chatThemeData.colorTheme.black,
                   ),
                   onPressed: () async {
                     final attachment =
@@ -134,8 +136,7 @@ class _ImageFooterState extends State<ImageFooter> {
                     children: <Widget>[
                       Text(
                         '${widget.currentPage + 1} of ${widget.totalPages}',
-                        style:
+                        style: chatThemeData.textTheme.headlineBold,
-                            StreamChatTheme.of(context).textTheme.headlineBold,
                       ),
                     ],
                   ),
@@ -143,7 +144,7 @@ class _ImageFooterState extends State<ImageFooter> {
               ),
               IconButton(
                 icon: StreamSvgIcon.iconGrid(
-                  color: StreamChatTheme.of(context).colorTheme.black,
+                  color: chatThemeData.colorTheme.black,
                 ),
                 onPressed: () => _showPhotosModal(context),
               ),
@@ -155,10 +156,11 @@ class _ImageFooterState extends State<ImageFooter> {
   }
 
   void _showPhotosModal(context) {
+    final chatThemeData = StreamChatTheme.of(context);
     showModalBottomSheet(
       context: context,
-      barrierColor: StreamChatTheme.of(context).colorTheme.overlay,
+      barrierColor: chatThemeData.colorTheme.overlay,
-      backgroundColor: StreamChatTheme.of(context).colorTheme.white,
+      backgroundColor: chatThemeData.colorTheme.white,
       isScrollControlled: true,
       shape: const RoundedRectangleBorder(
         borderRadius: BorderRadius.only(
@@ -189,9 +191,7 @@ class _ImageFooterState extends State<ImageFooter> {
                         padding: const EdgeInsets.all(16),
                         child: Text(
                           'Photos',
-                          style: StreamChatTheme.of(context)
+                          style: chatThemeData.textTheme.headlineBold,
-                              .textTheme
-                              .headlineBold,
                         ),
                       ),
                     ),
@@ -199,7 +199,7 @@ class _ImageFooterState extends State<ImageFooter> {
                       alignment: Alignment.centerRight,
                       child: IconButton(
                         icon: StreamSvgIcon.close(
-                          color: StreamChatTheme.of(context).colorTheme.black,
+                          color: chatThemeData.colorTheme.black,
                         ),
                         onPressed: () => Navigator.maybePop(context),
                       ),
@@ -262,9 +262,7 @@ class _ImageFooterState extends State<ImageFooter> {
                                   boxShadow: [
                                     BoxShadow(
                                       blurRadius: 8,
-                                      color: StreamChatTheme.of(context)
+                                      color: chatThemeData.colorTheme.black
-                                          .colorTheme
-                                          .black
                                           .withOpacity(0.3),
                                     ),
                                   ],

packages/stream_chat_flutter/lib/src/image_header.dart

@@ -50,25 +50,26 @@ class ImageHeader extends StatelessWidget implements PreferredSizeWidget {
   final int currentIndex;
 
   @override
-  Widget build(BuildContext context) => AppBar(
+  Widget build(BuildContext context) {
+    final chatThemeData = StreamChatTheme.of(context);
+    return AppBar(
       brightness: Theme.of(context).brightness,
       elevation: 1,
       leading: showBackButton
           ? IconButton(
               icon: StreamSvgIcon.close(
-                  color: StreamChatTheme.of(context).colorTheme.black,
+                color: chatThemeData.colorTheme.black,
                 size: 24,
               ),
               onPressed: onBackPressed,
             )
           : const SizedBox(),
-        backgroundColor:
+      backgroundColor: chatThemeData.channelTheme.channelHeaderTheme.color,
-            StreamChatTheme.of(context).channelTheme.channelHeaderTheme.color,
       actions: <Widget>[
         if (message.type != 'ephemeral')
           IconButton(
             icon: StreamSvgIcon.iconMenuPoint(
-                color: StreamChatTheme.of(context).colorTheme.black,
+              color: chatThemeData.colorTheme.black,
             ),
             onPressed: () {
               _showMessageActionModalBottomSheet(context);
@@ -88,14 +89,11 @@ class ImageHeader extends StatelessWidget implements PreferredSizeWidget {
                   children: <Widget>[
                     Text(
                       userName,
-                        style:
+                      style: chatThemeData.textTheme.headlineBold,
-                            StreamChatTheme.of(context).textTheme.headlineBold,
                     ),
                     Text(
                       sentAt,
-                        style: StreamChatTheme.of(context)
+                      style: chatThemeData.channelPreviewTheme.subtitle,
-                            .channelPreviewTheme
-                            .subtitle,
                     ),
                   ],
                 ),
@@ -103,6 +101,7 @@ class ImageHeader extends StatelessWidget implements PreferredSizeWidget {
             )
           : const SizedBox(),
     );
+  }
 
   @override
   final Size preferredSize;

packages/stream_chat_flutter/lib/src/info_tile.dart

@@ -38,19 +38,21 @@ class InfoTile extends StatelessWidget {
   final Color? backgroundColor;
 
   @override
-  Widget build(BuildContext context) => PortalEntry(
+  Widget build(BuildContext context) {
+    final chatThemeData = StreamChatTheme.of(context);
+    return PortalEntry(
       visible: showMessage,
       portalAnchor: tileAnchor ?? Alignment.topCenter,
       childAnchor: childAnchor ?? Alignment.bottomCenter,
       portal: Container(
         height: 25,
-          color: backgroundColor ??
+        color:
-              StreamChatTheme.of(context).colorTheme.grey.withOpacity(0.9),
+            backgroundColor ?? chatThemeData.colorTheme.grey.withOpacity(0.9),
         child: Center(
           child: Text(
             message,
             style: textStyle ??
-                  StreamChatTheme.of(context).textTheme.body.copyWith(
+                chatThemeData.textTheme.body.copyWith(
                   color: Colors.white,
                 ),
             maxLines: 1,
@@ -61,3 +63,4 @@ class InfoTile extends StatelessWidget {
       child: child,
     );
   }
+}

packages/stream_chat_flutter/lib/src/media_list_view.dart

@@ -56,6 +56,7 @@ class _MediaListViewState extends State<MediaListView> {
             position,
           ) {
             final media = _media.elementAt(position);
+            final chatThemeData = StreamChatTheme.of(context);
             return Padding(
               padding: const EdgeInsets.symmetric(horizontal: 1, vertical: 1),
               child: InkWell(
@@ -89,10 +90,8 @@ class _MediaListViewState extends State<MediaListView> {
                                   ? 1.0
                                   : 0.0,
                           child: Container(
-                            color: StreamChatTheme.of(context)
+                            color:
-                                .colorTheme
+                                chatThemeData.colorTheme.black.withOpacity(0.5),
-                                .black
-                                .withOpacity(0.5),
                             alignment: Alignment.topRight,
                             padding: const EdgeInsets.only(
                               top: 8,
@@ -100,13 +99,10 @@ class _MediaListViewState extends State<MediaListView> {
                             ),
                             child: CircleAvatar(
                               radius: 12,
-                              backgroundColor:
+                              backgroundColor: chatThemeData.colorTheme.white,
-                                  StreamChatTheme.of(context).colorTheme.white,
                               child: StreamSvgIcon.check(
                                 size: 24,
-                                color: StreamChatTheme.of(context)
+                                color: chatThemeData.colorTheme.black,
-                                    .colorTheme
-                                    .black,
                               ),
                             ),
                           ),
@@ -128,7 +124,7 @@ class _MediaListViewState extends State<MediaListView> {
                         child: Text(
                           media.videoDuration.format(),
                           style: TextStyle(
-                            color: StreamChatTheme.of(context).colorTheme.white,
+                            color: chatThemeData.colorTheme.white,
                           ),
                         ),
                       ),

packages/stream_chat_flutter/lib/src/mention_tile.dart

@@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
 /// This widget is used for showing user tiles for mentions
@@ -32,7 +31,9 @@ class MentionTile extends StatelessWidget {
   final Widget? trailing;
 
   @override
-  Widget build(BuildContext context) => SizedBox(
+  Widget build(BuildContext context) {
+    final chatThemeData = StreamChatTheme.of(context);
+    return SizedBox(
       height: 56,
       child: Row(
         children: [
@@ -64,7 +65,7 @@ class MentionTile extends StatelessWidget {
                         member.user!.name,
                         maxLines: 1,
                         overflow: TextOverflow.ellipsis,
-                          style: StreamChatTheme.of(context).textTheme.bodyBold,
+                        style: chatThemeData.textTheme.bodyBold,
                       ),
                   const SizedBox(
                     height: 2,
@@ -74,12 +75,8 @@ class MentionTile extends StatelessWidget {
                         '@${member.userId}',
                         maxLines: 1,
                         overflow: TextOverflow.ellipsis,
-                          style: StreamChatTheme.of(context)
+                        style: chatThemeData.textTheme.footnoteBold.copyWith(
-                              .textTheme
+                          color: chatThemeData.colorTheme.grey,
-                              .footnoteBold
-                              .copyWith(
-                                color:
-                                    StreamChatTheme.of(context).colorTheme.grey,
                         ),
                       ),
                 ],
@@ -93,10 +90,11 @@ class MentionTile extends StatelessWidget {
                   left: 8,
                 ),
                 child: StreamSvgIcon.mentions(
-                    color: StreamChatTheme.of(context).colorTheme.accentBlue,
+                  color: chatThemeData.colorTheme.accentBlue,
                 ),
               ),
         ],
       ),
     );
   }
+}

packages/stream_chat_flutter/lib/src/message_actions_modal.dart

@@ -3,12 +3,12 @@ import 'dart:ui';
 
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
+import 'package:stream_chat_flutter/src/extension.dart';
 import 'package:stream_chat_flutter/src/message_action.dart';
 import 'package:stream_chat_flutter/src/reaction_picker.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/src/extension.dart';
 
 /// Constructs a modal with actions for a message
 class MessageActionsModal extends StatefulWidget {
@@ -108,7 +108,8 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
   Widget build(BuildContext context) => _showMessageOptionsModal();
 
   Widget _showMessageOptionsModal() {
-    final size = MediaQuery.of(context).size;
+    final mediaQueryData = MediaQuery.of(context);
+    final size = mediaQueryData.size;
     final user = StreamChat.of(context).user;
 
     final roughMaxSize = 2 * size.width / 3;
@@ -133,6 +134,7 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
     final hasFileAttachment =
         widget.message.attachments.any((it) => it.type == 'file') == true;
 
+    final streamChatThemeData = StreamChatTheme.of(context);
     return GestureDetector(
       behavior: HitTestBehavior.translucent,
       onTap: () => Navigator.maybePop(context),
@@ -145,7 +147,7 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
                 sigmaY: 10,
               ),
               child: Container(
-                color: StreamChatTheme.of(context).colorTheme.overlay,
+                color: streamChatThemeData.colorTheme.overlay,
               ),
             ),
           ),
@@ -226,11 +228,9 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
                               left: widget.reverse ? 0 : 40,
                             ),
                             child: SizedBox(
-                              width: MediaQuery.of(context).size.width * 0.75,
+                              width: mediaQueryData.size.width * 0.75,
                               child: Material(
-                                color: StreamChatTheme.of(context)
+                                color: streamChatThemeData.colorTheme.whiteSnow,
-                                    .colorTheme
-                                    .whiteSnow,
                                 clipBehavior: Clip.hardEdge,
                                 shape: RoundedRectangleBorder(
                                   borderRadius: BorderRadius.circular(16),
@@ -266,9 +266,8 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
                                   ].insertBetween(
                                     Container(
                                       height: 1,
-                                      color: StreamChatTheme.of(context)
+                                      color: streamChatThemeData
-                                          .colorTheme
+                                          .colorTheme.greyWhisper,
-                                          .greyWhisper,
                                     ),
                                   ),
                                 ),
@@ -310,11 +309,12 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
   void _showFlagDialog() async {
     final client = StreamChat.of(context).client;
 
+    final streamChatThemeData = StreamChatTheme.of(context);
     final answer = await showConfirmationDialog(
       context,
       title: 'Flag Message',
       icon: StreamSvgIcon.flag(
-        color: StreamChatTheme.of(context).colorTheme.accentRed,
+        color: streamChatThemeData.colorTheme.accentRed,
         size: 24,
       ),
       question:
@@ -324,7 +324,7 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
       cancelText: 'CANCEL',
     );
 
-    final theme = StreamChatTheme.of(context);
+    final theme = streamChatThemeData;
     if (answer == true) {
       try {
         await client.flagMessage(widget.message.id);
@@ -400,7 +400,9 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
     );
   }
 
-  Widget _buildReplyButton(BuildContext context) => InkWell(
+  Widget _buildReplyButton(BuildContext context) {
+    final streamChatThemeData = StreamChatTheme.of(context);
+    return InkWell(
       onTap: () {
         Navigator.pop(context);
         if (widget.onReplyTap != null) {
@@ -412,36 +414,40 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
         child: Row(
           children: [
             StreamSvgIcon.reply(
-                color: StreamChatTheme.of(context).primaryIconTheme.color,
+              color: streamChatThemeData.primaryIconTheme.color,
             ),
             const SizedBox(width: 16),
             Text(
               'Reply',
-                style: StreamChatTheme.of(context).textTheme.body,
+              style: streamChatThemeData.textTheme.body,
             ),
           ],
         ),
       ),
     );
+  }
 
-  Widget _buildFlagButton(BuildContext context) => InkWell(
+  Widget _buildFlagButton(BuildContext context) {
+    final streamChatThemeData = StreamChatTheme.of(context);
+    return InkWell(
       onTap: _showFlagDialog,
       child: Padding(
         padding: const EdgeInsets.symmetric(vertical: 11, horizontal: 16),
         child: Row(
           children: [
             StreamSvgIcon.iconFlag(
-                color: StreamChatTheme.of(context).primaryIconTheme.color,
+              color: streamChatThemeData.primaryIconTheme.color,
             ),
             const SizedBox(width: 16),
             Text(
               'Flag Message',
-                style: StreamChatTheme.of(context).textTheme.body,
+              style: streamChatThemeData.textTheme.body,
             ),
           ],
         ),
       ),
     );
+  }
 
   Widget _buildDeleteButton(BuildContext context) {
     final isDeleteFailed =
@@ -469,7 +475,9 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
     );
   }
 
-  Widget _buildCopyButton(BuildContext context) => InkWell(
+  Widget _buildCopyButton(BuildContext context) {
+    final streamChatThemeData = StreamChatTheme.of(context);
+    return InkWell(
       onTap: () async {
         widget.onCopyTap?.call(widget.message);
         Navigator.pop(context);
@@ -480,19 +488,22 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
           children: [
             StreamSvgIcon.copy(
               size: 24,
-                color: StreamChatTheme.of(context).primaryIconTheme.color,
+              color: streamChatThemeData.primaryIconTheme.color,
             ),
             const SizedBox(width: 16),
             Text(
               'Copy Message',
-                style: StreamChatTheme.of(context).textTheme.body,
+              style: streamChatThemeData.textTheme.body,
             ),
           ],
         ),
       ),
     );
+  }
 
-  Widget _buildEditMessage(BuildContext context) => InkWell(
+  Widget _buildEditMessage(BuildContext context) {
+    final streamChatThemeData = StreamChatTheme.of(context);
+    return InkWell(
       onTap: () async {
         Navigator.pop(context);
         _showEditBottomSheet(context);
@@ -502,21 +513,23 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
         child: Row(
           children: [
             StreamSvgIcon.edit(
-                color: StreamChatTheme.of(context).primaryIconTheme.color,
+              color: streamChatThemeData.primaryIconTheme.color,
             ),
             const SizedBox(width: 16),
             Text(
               'Edit Message',
-                style: StreamChatTheme.of(context).textTheme.body,
+              style: streamChatThemeData.textTheme.body,
             ),
           ],
         ),
       ),
     );
+  }
 
   Widget _buildResendMessage(BuildContext context) {
     final isUpdateFailed =
         widget.message.status == MessageSendingStatus.failed_update;
+    final streamChatThemeData = StreamChatTheme.of(context);
     return InkWell(
       onTap: () {
         Navigator.pop(context);
@@ -532,12 +545,12 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
         child: Row(
           children: [
             StreamSvgIcon.circleUp(
-              color: StreamChatTheme.of(context).colorTheme.accentBlue,
+              color: streamChatThemeData.colorTheme.accentBlue,
             ),
             const SizedBox(width: 16),
             Text(
               isUpdateFailed ? 'Resend Edited Message' : 'Resend',
-              style: StreamChatTheme.of(context).textTheme.body,
+              style: streamChatThemeData.textTheme.body,
             ),
           ],
         ),
@@ -547,13 +560,13 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
 
   void _showEditBottomSheet(BuildContext context) {
     final channel = StreamChannel.of(context).channel;
+    final streamChatThemeData = StreamChatTheme.of(context);
     showModalBottomSheet(
       context: context,
       elevation: 2,
       clipBehavior: Clip.hardEdge,
       isScrollControlled: true,
-      backgroundColor:
+      backgroundColor: streamChatThemeData.messageInputTheme.inputBackground,
-          StreamChatTheme.of(context).messageInputTheme.inputBackground,
       shape: const RoundedRectangleBorder(
         borderRadius: BorderRadius.only(
           topLeft: Radius.circular(16),
@@ -575,8 +588,7 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
                   Padding(
                     padding: const EdgeInsets.all(8),
                     child: StreamSvgIcon.edit(
-                      color:
+                      color: streamChatThemeData.colorTheme.greyGainsboro,
-                          StreamChatTheme.of(context).colorTheme.greyGainsboro,
                     ),
                   ),
                   const Text(
@@ -608,7 +620,9 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
     );
   }
 
-  Widget _buildThreadReplyButton(BuildContext context) => InkWell(
+  Widget _buildThreadReplyButton(BuildContext context) {
+    final streamChatThemeData = StreamChatTheme.of(context);
+    return InkWell(
       onTap: () {
         Navigator.pop(context);
         if (widget.onThreadReplyTap != null) {
@@ -620,15 +634,16 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
         child: Row(
           children: [
             StreamSvgIcon.thread(
-                color: StreamChatTheme.of(context).primaryIconTheme.color,
+              color: streamChatThemeData.primaryIconTheme.color,
             ),
             const SizedBox(width: 16),
             Text(
               'Thread Reply',
-                style: StreamChatTheme.of(context).textTheme.body,
+              style: streamChatThemeData.textTheme.body,
             ),
           ],
         ),
       ),
     );
   }
+}

packages/stream_chat_flutter/lib/src/message_input.dart

@@ -12,6 +12,7 @@ import 'package:image_picker/image_picker.dart';
 import 'package:photo_manager/photo_manager.dart';
 import 'package:shimmer/shimmer.dart';
 import 'package:stream_chat_flutter/src/emoji/emoji.dart';
+import 'package:stream_chat_flutter/src/extension.dart';
 import 'package:stream_chat_flutter/src/media_list_view.dart';
 import 'package:stream_chat_flutter/src/message_list_view.dart';
 import 'package:stream_chat_flutter/src/quoted_message_widget.dart';
@@ -19,11 +20,10 @@ 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/video_service.dart';
 import 'package:stream_chat_flutter/src/video_thumbnail_image.dart';
+import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';
 import 'package:substring_highlight/substring_highlight.dart';
 import 'package:video_compress/video_compress.dart';
-import 'package:stream_chat_flutter/src/extension.dart';
-import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
 /// Builder for attachment thumbnails
 typedef AttachmentThumbnailBuilder = Widget Function(
@@ -299,8 +299,9 @@ class MessageInputState extends State<MessageInput> {
 
   @override
   Widget build(BuildContext context) {
+    final streamChatThemeData = StreamChatTheme.of(context);
     Widget child = Container(
-      color: StreamChatTheme.of(context).messageInputTheme.inputBackground,
+      color: streamChatThemeData.messageInputTheme.inputBackground,
       child: SafeArea(
         child: GestureDetector(
           onPanUpdate: (details) {
@@ -325,9 +326,7 @@ class MessageInputState extends State<MessageInput> {
                       Padding(
                         padding: const EdgeInsets.all(8),
                         child: StreamSvgIcon.reply(
-                          color: StreamChatTheme.of(context)
+                          color: streamChatThemeData.colorTheme.greyGainsboro,
-                              .colorTheme
-                              .greyGainsboro,
                         ),
                       ),
                       const Text(
@@ -385,7 +384,9 @@ class MessageInputState extends State<MessageInput> {
         ],
       );
 
-  Widget _buildDmCheckbox() => Row(
+  Widget _buildDmCheckbox() {
+    final streamChatThemeData = StreamChatTheme.of(context);
+    return Row(
       children: [
         Container(
           height: 16,
@@ -394,10 +395,7 @@ class MessageInputState extends State<MessageInput> {
             border: _sendAsDm
                 ? null
                 : Border.all(
-                      color: StreamChatTheme.of(context)
+                    color: streamChatThemeData.colorTheme.black.withOpacity(.5),
-                          .colorTheme
-                          .black
-                          .withOpacity(.5),
                     width: 2,
                   ),
             borderRadius: BorderRadius.circular(3),
@@ -406,8 +404,8 @@ class MessageInputState extends State<MessageInput> {
             child: Material(
               borderRadius: BorderRadius.circular(3),
               color: _sendAsDm
-                    ? StreamChatTheme.of(context).colorTheme.accentBlue
+                  ? streamChatThemeData.colorTheme.accentBlue
-                    : StreamChatTheme.of(context).colorTheme.white,
+                  : streamChatThemeData.colorTheme.white,
               child: InkWell(
                 onTap: () {
                   setState(() {
@@ -422,7 +420,7 @@ class MessageInputState extends State<MessageInput> {
                       : CrossFadeState.showSecond,
                   firstChild: StreamSvgIcon.check(
                     size: 16,
-                      color: StreamChatTheme.of(context).colorTheme.white,
+                    color: streamChatThemeData.colorTheme.white,
                   ),
                   secondChild: const SizedBox(
                     height: 16,
@@ -437,16 +435,14 @@ class MessageInputState extends State<MessageInput> {
           padding: const EdgeInsets.symmetric(horizontal: 12),
           child: Text(
             'Also send as direct message',
-              style: StreamChatTheme.of(context).textTheme.footnote.copyWith(
+            style: streamChatThemeData.textTheme.footnote.copyWith(
-                    color: StreamChatTheme.of(context)
+              color: streamChatThemeData.colorTheme.black.withOpacity(0.5),
-                        .colorTheme
-                        .black
-                        .withOpacity(0.5),
             ),
           ),
         ),
       ],
     );
+  }
 
   Widget _animateSendButton(BuildContext context) {
     final sendButton = widget.activeSendButton != null
@@ -636,10 +632,7 @@ class MessageInputState extends State<MessageInput> {
                         ),
                         Text(
                           _chosenCommand?.name.toUpperCase() ?? '',
-                          style: StreamChatTheme.of(context)
+                          style: theme.textTheme.footnoteBold.copyWith(
-                              .textTheme
-                              .footnoteBold
-                              .copyWith(
                             color: Colors.white,
                           ),
                         ),
@@ -839,7 +832,9 @@ class MessageInputState extends State<MessageInput> {
                   tween: Tween(begin: 0, end: 1),
                   duration: const Duration(milliseconds: 300),
                   curve: Curves.easeInOutExpo,
-                  builder: (context, val, wid) => Transform.scale(
+                  builder: (context, val, wid) {
+                    final streamChatThemeData = StreamChatTheme.of(context);
+                    return Transform.scale(
                       scale: val,
                       child: Padding(
                         padding: const EdgeInsets.all(8),
@@ -848,15 +843,13 @@ class MessageInputState extends State<MessageInput> {
                           shape: RoundedRectangleBorder(
                             borderRadius: BorderRadius.circular(8),
                           ),
-                            color: StreamChatTheme.of(context).colorTheme.white,
+                          color: streamChatThemeData.colorTheme.white,
                           clipBehavior: Clip.antiAlias,
                           child: Container(
                             constraints: BoxConstraints.loose(
                                 const Size.fromHeight(400)),
                             decoration: BoxDecoration(
-                                  color: StreamChatTheme.of(context)
+                                color: streamChatThemeData.colorTheme.white,
-                                      .colorTheme
-                                      .white,
                                 borderRadius: BorderRadius.circular(8)),
                             child: ListView(
                               padding: const EdgeInsets.all(0),
@@ -872,17 +865,15 @@ class MessageInputState extends State<MessageInput> {
                                             horizontal: 8,
                                           ),
                                           child: StreamSvgIcon.lightning(
-                                              color: StreamChatTheme.of(context)
+                                            color: streamChatThemeData
-                                                  .colorTheme
+                                                .colorTheme.accentBlue,
-                                                  .accentBlue,
                                           ),
                                         ),
                                         Text(
                                           'Instant Commands',
                                           style: TextStyle(
-                                              color: StreamChatTheme.of(context)
+                                            color: streamChatThemeData
-                                                  .colorTheme
+                                                .colorTheme.black
-                                                  .black
                                                 .withOpacity(.5),
                                           ),
                                         )
@@ -919,16 +910,11 @@ class MessageInputState extends State<MessageInput> {
                                                     TextSpan(
                                                       text:
                                                           '   /${c.name} ${c.args}',
-                                                        style:
+                                                      style: streamChatThemeData
-                                                            StreamChatTheme.of(
+                                                          .textTheme.body
-                                                                    context)
-                                                                .textTheme
-                                                                .body
                                                           .copyWith(
                                                         // ignore: lines_longer_than_80_chars
-                                                                  color: StreamChatTheme.of(
+                                                        color: streamChatThemeData
-                                                                          // ignore: lines_longer_than_80_chars
-                                                                          context)
                                                             // ignore: lines_longer_than_80_chars
                                                             .colorTheme
                                                             .grey,
@@ -948,7 +934,8 @@ class MessageInputState extends State<MessageInput> {
                           ),
                         ),
                       ),
-                      )),
+                    );
+                  }),
             ));
   }
 
@@ -956,37 +943,30 @@ class MessageInputState extends State<MessageInput> {
     final _attachmentContainsFile =
         _attachments.values.any((it) => it.type == 'file');
 
+    final chatThemeData = StreamChatTheme.of(context);
     Color _getIconColor(int index) {
+      final streamChatThemeData = chatThemeData;
       switch (index) {
         case 0:
           return _attachments.isEmpty
-              ? StreamChatTheme.of(context).colorTheme.accentBlue
+              ? streamChatThemeData.colorTheme.accentBlue
               : (!_attachmentContainsFile
-                  ? StreamChatTheme.of(context).colorTheme.accentBlue
+                  ? streamChatThemeData.colorTheme.accentBlue
-                  : StreamChatTheme.of(context)
+                  : streamChatThemeData.colorTheme.black.withOpacity(0.2));
-                      .colorTheme
-                      .black
-                      .withOpacity(0.2));
         case 1:
           return _attachmentContainsFile
-              ? StreamChatTheme.of(context).colorTheme.accentBlue
+              ? streamChatThemeData.colorTheme.accentBlue
               : (_attachments.isEmpty
-                  ? StreamChatTheme.of(context)
+                  ? streamChatThemeData.colorTheme.black.withOpacity(0.5)
-                      .colorTheme
+                  : streamChatThemeData.colorTheme.black.withOpacity(0.2));
-                      .black
-                      .withOpacity(0.5)
-                  : StreamChatTheme.of(context)
-                      .colorTheme
-                      .black
-                      .withOpacity(0.2));
         case 2:
           return _attachmentContainsFile && _attachments.isNotEmpty
-              ? StreamChatTheme.of(context).colorTheme.black.withOpacity(0.2)
+              ? streamChatThemeData.colorTheme.black.withOpacity(0.2)
-              : StreamChatTheme.of(context).colorTheme.black.withOpacity(0.5);
+              : streamChatThemeData.colorTheme.black.withOpacity(0.5);
         case 3:
           return _attachmentContainsFile && _attachments.isNotEmpty
-              ? StreamChatTheme.of(context).colorTheme.black.withOpacity(0.2)
+              ? streamChatThemeData.colorTheme.black.withOpacity(0.2)
-              : StreamChatTheme.of(context).colorTheme.black.withOpacity(0.5);
+              : streamChatThemeData.colorTheme.black.withOpacity(0.5);
         default:
           return Colors.black;
       }
@@ -997,7 +977,7 @@ class MessageInputState extends State<MessageInput> {
           _animateContainer ? const Duration(milliseconds: 300) : Duration.zero,
       height: _openFilePickerSection ? _filePickerSize : 0,
       child: Material(
-        color: StreamChatTheme.of(context).colorTheme.whiteSmoke,
+        color: chatThemeData.colorTheme.whiteSmoke,
         child: Column(
           mainAxisSize: MainAxisSize.min,
           children: [
@@ -1061,7 +1041,7 @@ class MessageInputState extends State<MessageInput> {
               },
               child: Container(
                 decoration: BoxDecoration(
-                  color: StreamChatTheme.of(context).colorTheme.white,
+                  color: chatThemeData.colorTheme.white,
                   borderRadius: const BorderRadius.only(
                     topLeft: Radius.circular(16),
                     topRight: Radius.circular(16),
@@ -1076,8 +1056,7 @@ class MessageInputState extends State<MessageInput> {
                         width: 40,
                         height: 4,
                         decoration: BoxDecoration(
-                          color:
+                          color: chatThemeData.colorTheme.whiteSmoke,
-                              StreamChatTheme.of(context).colorTheme.whiteSmoke,
                           borderRadius: BorderRadius.circular(4),
                         ),
                       ),
@@ -1090,7 +1069,7 @@ class MessageInputState extends State<MessageInput> {
               Expanded(
                 child: Container(
                   decoration: BoxDecoration(
-                    color: StreamChatTheme.of(context).colorTheme.white,
+                    color: chatThemeData.colorTheme.white,
                     borderRadius: BorderRadius.circular(8),
                   ),
                   child: _PickerWidget(
@@ -1166,6 +1145,7 @@ class MessageInputState extends State<MessageInput> {
   }
 
   Widget _buildCommandIcon(String iconType) {
+    final chatThemeData = StreamChatTheme.of(context);
     switch (iconType) {
       case 'giphy':
         return CircleAvatar(
@@ -1176,7 +1156,7 @@ class MessageInputState extends State<MessageInput> {
         );
       case 'ban':
         return CircleAvatar(
-          backgroundColor: StreamChatTheme.of(context).colorTheme.accentBlue,
+          backgroundColor: chatThemeData.colorTheme.accentBlue,
           radius: 12,
           child: StreamSvgIcon.iconUserDelete(
             size: 16,
@@ -1185,7 +1165,7 @@ class MessageInputState extends State<MessageInput> {
         );
       case 'flag':
         return CircleAvatar(
-          backgroundColor: StreamChatTheme.of(context).colorTheme.accentBlue,
+          backgroundColor: chatThemeData.colorTheme.accentBlue,
           radius: 12,
           child: StreamSvgIcon.flag(
             size: 14,
@@ -1194,7 +1174,7 @@ class MessageInputState extends State<MessageInput> {
         );
       case 'imgur':
         return CircleAvatar(
-          backgroundColor: StreamChatTheme.of(context).colorTheme.accentBlue,
+          backgroundColor: chatThemeData.colorTheme.accentBlue,
           radius: 12,
           child: ClipOval(
             child: StreamSvgIcon.imgur(
@@ -1204,7 +1184,7 @@ class MessageInputState extends State<MessageInput> {
         );
       case 'mute':
         return CircleAvatar(
-          backgroundColor: StreamChatTheme.of(context).colorTheme.accentBlue,
+          backgroundColor: chatThemeData.colorTheme.accentBlue,
           radius: 12,
           child: StreamSvgIcon.mute(
             size: 16,
@@ -1213,7 +1193,7 @@ class MessageInputState extends State<MessageInput> {
         );
       case 'unban':
         return CircleAvatar(
-          backgroundColor: StreamChatTheme.of(context).colorTheme.accentBlue,
+          backgroundColor: chatThemeData.colorTheme.accentBlue,
           radius: 12,
           child: StreamSvgIcon.userAdd(
             size: 16,
@@ -1222,7 +1202,7 @@ class MessageInputState extends State<MessageInput> {
         );
       case 'unmute':
         return CircleAvatar(
-          backgroundColor: StreamChatTheme.of(context).colorTheme.accentBlue,
+          backgroundColor: chatThemeData.colorTheme.accentBlue,
           radius: 12,
           child: StreamSvgIcon.volumeUp(
             size: 16,
@@ -1231,7 +1211,7 @@ class MessageInputState extends State<MessageInput> {
         );
       default:
         return CircleAvatar(
-          backgroundColor: StreamChatTheme.of(context).colorTheme.accentBlue,
+          backgroundColor: chatThemeData.colorTheme.accentBlue,
           radius: 12,
           child: StreamSvgIcon.lightning(
             size: 16,
@@ -1249,17 +1229,14 @@ class MessageInputState extends State<MessageInput> {
 
     Future<List<Member>>? queryMembers;
 
+    final channelState = StreamChannel.of(context);
     if (query.isNotEmpty) {
-      queryMembers = StreamChannel.of(context)
+      queryMembers = channelState.channel
-          .channel
           .queryMembers(filter: Filter.autoComplete('name', query))
           .then((res) => res.members);
     }
 
-    final members = StreamChannel.of(context)
+    final members = channelState.channel.state?.members
-            .channel
-            .state
-            ?.members
             .where((m) => m.user?.name.toLowerCase().contains(query) == true)
             .toList() ??
         [];
@@ -1281,12 +1258,14 @@ class MessageInputState extends State<MessageInput> {
           tween: Tween(begin: 0, end: 1),
           duration: const Duration(milliseconds: 300),
           curve: Curves.easeInOutExpo,
-          builder: (context, val, wid) => Transform.scale(
+          builder: (context, val, wid) {
+            final chatThemeData = StreamChatTheme.of(context);
+            return Transform.scale(
               scale: val,
               child: Card(
                 margin: const EdgeInsets.all(8),
                 elevation: 2,
-              color: StreamChatTheme.of(context).colorTheme.white,
+                color: chatThemeData.colorTheme.white,
                 shape: RoundedRectangleBorder(
                   borderRadius: BorderRadius.circular(8),
                 ),
@@ -1294,7 +1273,7 @@ class MessageInputState extends State<MessageInput> {
                 child: Container(
                   constraints: BoxConstraints.loose(const Size.fromHeight(240)),
                   decoration: BoxDecoration(
-                  color: StreamChatTheme.of(context).colorTheme.white,
+                    color: chatThemeData.colorTheme.white,
                   ),
                   child: FutureBuilder<List<Member>>(
                     future: queryMembers ?? Future.value(members),
@@ -1310,8 +1289,7 @@ class MessageInputState extends State<MessageInput> {
                             .where((it) => it.user != null)
                             .map(
                               (m) => Material(
-                              color:
+                                color: chatThemeData.colorTheme.white,
-                                  StreamChatTheme.of(context).colorTheme.white,
                                 child: InkWell(
                                   onTap: () {
                                     if (m.user != null) {
@@ -1350,7 +1328,8 @@ class MessageInputState extends State<MessageInput> {
                   ),
                 ),
               ),
-          ),
+            );
+          },
         ),
       ),
     );
@@ -1379,15 +1358,16 @@ class MessageInputState extends State<MessageInput> {
     final renderBox = context.findRenderObject() as RenderBox;
     final size = renderBox.size;
 
-    return OverlayEntry(
+    return OverlayEntry(builder: (context) {
-        builder: (context) => Positioned(
+      final chatThemeData = StreamChatTheme.of(context);
+      return Positioned(
         bottom: size.height + MediaQuery.of(context).viewInsets.bottom,
         left: 0,
         right: 0,
         child: Card(
           margin: const EdgeInsets.all(8),
           elevation: 2,
-                color: StreamChatTheme.of(context).colorTheme.white,
+          color: chatThemeData.colorTheme.white,
           shape: RoundedRectangleBorder(
             borderRadius: BorderRadius.circular(8),
           ),
@@ -1402,7 +1382,7 @@ class MessageInputState extends State<MessageInput> {
                   offset: Offset(0, -4),
                 ),
               ],
-                    color: StreamChatTheme.of(context).colorTheme.white,
+              color: chatThemeData.colorTheme.white,
             ),
             child: ListView.builder(
                 padding: const EdgeInsets.all(0),
@@ -1415,21 +1395,16 @@ class MessageInputState extends State<MessageInput> {
                       child: Row(
                         children: [
                           Padding(
-                                  padding:
+                            padding: const EdgeInsets.symmetric(horizontal: 8),
-                                      const EdgeInsets.symmetric(horizontal: 8),
                             child: StreamSvgIcon.smile(
-                                    color: StreamChatTheme.of(context)
+                              color: chatThemeData.colorTheme.accentBlue,
-                                        .colorTheme
-                                        .accentBlue,
                             ),
                           ),
                           Flexible(
                             child: Text(
                               'Emoji matching "$query"',
                               style: TextStyle(
-                                      color: StreamChatTheme.of(context)
+                                color: chatThemeData.colorTheme.black
-                                          .colorTheme
-                                          .black
                                     .withOpacity(.5),
                               ),
                             ),
@@ -1440,6 +1415,7 @@ class MessageInputState extends State<MessageInput> {
                   }
 
                   final emoji = emojis.elementAt(i - 1)!;
+                  final themeData = Theme.of(context);
                   return ListTile(
                     title: SubstringHighlight(
                       text:
@@ -1447,12 +1423,11 @@ class MessageInputState extends State<MessageInput> {
                           "${emoji.char} ${emoji.name!.replaceAll('_', ' ')}",
                       term: query,
                       textStyleHighlight:
-                                Theme.of(context).textTheme.headline6!.copyWith(
+                          themeData.textTheme.headline6!.copyWith(
                         fontSize: 14.5,
                         fontWeight: FontWeight.bold,
                       ),
-                            textStyle:
+                      textStyle: themeData.textTheme.headline6!.copyWith(
-                                Theme.of(context).textTheme.headline6!.copyWith(
                         fontSize: 14.5,
                       ),
                     ),
@@ -1463,7 +1438,8 @@ class MessageInputState extends State<MessageInput> {
                 }),
           ),
         ),
-            ));
+      );
+    });
   }
 
   void _chooseEmoji(List<String> splits, Emoji emoji) {
@@ -1589,7 +1565,9 @@ class MessageInputState extends State<MessageInput> {
     );
   }
 
-  Widget _buildRemoveButton(Attachment attachment) => SizedBox(
+  Widget _buildRemoveButton(Attachment attachment) {
+    final chatThemeData = StreamChatTheme.of(context);
+    return SizedBox(
       height: 24,
       width: 24,
       child: RawMaterialButton(
@@ -1603,16 +1581,16 @@ class MessageInputState extends State<MessageInput> {
         onPressed: () {
           setState(() => _attachments.remove(attachment.id));
         },
-          fillColor:
+        fillColor: chatThemeData.colorTheme.black.withOpacity(.5),
-              StreamChatTheme.of(context).colorTheme.black.withOpacity(.5),
         child: Center(
           child: StreamSvgIcon.close(
             size: 24,
-              color: StreamChatTheme.of(context).colorTheme.white,
+            color: chatThemeData.colorTheme.white,
           ),
         ),
       ),
     );
+  }
 
   Widget _buildAttachment(Attachment attachment) {
     if (widget.attachmentThumbnailBuilders?.containsKey(attachment.type) ==
@@ -1642,18 +1620,18 @@ class MessageInputState extends State<MessageInput> {
                 fit: BoxFit.cover,
                 errorWidget: (_, obj, trace) =>
                     getFileTypeImage(attachment.extraData['other'] as String?),
-                progressIndicatorBuilder: (context, _, progress) =>
+                progressIndicatorBuilder: (context, _, progress) {
-                    Shimmer.fromColors(
+                  final chatThemeData = StreamChatTheme.of(context);
-                  baseColor:
+                  return Shimmer.fromColors(
-                      StreamChatTheme.of(context).colorTheme.greyGainsboro,
+                    baseColor: chatThemeData.colorTheme.greyGainsboro,
-                  highlightColor:
+                    highlightColor: chatThemeData.colorTheme.whiteSmoke,
-                      StreamChatTheme.of(context).colorTheme.whiteSmoke,
                     child: Image.asset(
                       'images/placeholder.png',
                       fit: BoxFit.cover,
                       package: 'stream_chat_flutter',
                     ),
-                ),
+                  );
+                },
               );
       case 'video':
         return Stack(
@@ -1685,17 +1663,14 @@ class MessageInputState extends State<MessageInput> {
   Widget _buildCommandButton() {
     final s = textEditingController.text.trim();
 
+    final chatThemeData = StreamChatTheme.of(context);
     return IconButton(
       icon: StreamSvgIcon.lightning(
         color: s.isNotEmpty
-            ? StreamChatTheme.of(context).colorTheme.greyGainsboro
+            ? chatThemeData.colorTheme.greyGainsboro
             : (_commandsOverlay != null
-                ? StreamChatTheme.of(context)
+                ? chatThemeData.messageInputTheme.actionButtonColor
-                    .messageInputTheme
+                : chatThemeData.messageInputTheme.actionButtonIdleColor),
-                    .actionButtonColor
-                : StreamChatTheme.of(context)
-                    .messageInputTheme
-                    .actionButtonIdleColor),
       ),
       padding: const EdgeInsets.all(0),
       constraints: const BoxConstraints.tightFor(
@@ -1730,13 +1705,13 @@ class MessageInputState extends State<MessageInput> {
     );
   }
 
-  Widget _buildAttachmentButton() => IconButton(
+  Widget _buildAttachmentButton() {
+    final chatThemeData = StreamChatTheme.of(context);
+    return IconButton(
       icon: StreamSvgIcon.attach(
         color: _openFilePickerSection
-              ? StreamChatTheme.of(context).messageInputTheme.actionButtonColor
+            ? chatThemeData.messageInputTheme.actionButtonColor
-              : StreamChatTheme.of(context)
+            : chatThemeData.messageInputTheme.actionButtonIdleColor,
-                  .messageInputTheme
-                  .actionButtonIdleColor,
       ),
       padding: const EdgeInsets.all(0),
       constraints: const BoxConstraints.tightFor(
@@ -1763,6 +1738,7 @@ class MessageInputState extends State<MessageInput> {
         }
       },
     );
+  }
 
   /// Show the attachment modal, making the user choose where to
   /// pick a media from
@@ -2103,8 +2079,9 @@ class MessageInputState extends State<MessageInput> {
   StreamSubscription? _keyboardListener;
 
   void _showErrorAlert(String description) {
+    final chatThemeData = StreamChatTheme.of(context);
     showModalBottomSheet(
-      backgroundColor: StreamChatTheme.of(context).colorTheme.white,
+      backgroundColor: chatThemeData.colorTheme.white,
       context: context,
       shape: const RoundedRectangleBorder(
           borderRadius: BorderRadius.only(
@@ -2118,7 +2095,7 @@ class MessageInputState extends State<MessageInput> {
             height: 26,
           ),
           StreamSvgIcon.error(
-            color: StreamChatTheme.of(context).colorTheme.accentRed,
+            color: chatThemeData.colorTheme.accentRed,
             size: 24,
           ),
           const SizedBox(
@@ -2126,7 +2103,7 @@ class MessageInputState extends State<MessageInput> {
           ),
           Text(
             'Something went wrong',
-            style: StreamChatTheme.of(context).textTheme.headlineBold,
+            style: chatThemeData.textTheme.headlineBold,
           ),
           const SizedBox(
             height: 7,
@@ -2142,8 +2119,7 @@ class MessageInputState extends State<MessageInput> {
             height: 36,
           ),
           Container(
-            color:
+            color: chatThemeData.colorTheme.black.withOpacity(.08),
-                StreamChatTheme.of(context).colorTheme.black.withOpacity(.08),
             height: 1,
           ),
           Row(
@@ -2155,13 +2131,8 @@ class MessageInputState extends State<MessageInput> {
                 },
                 child: Text(
                   'OK',
-                  style: StreamChatTheme.of(context)
+                  style: chatThemeData.textTheme.bodyBold
-                      .textTheme
+                      .copyWith(color: chatThemeData.colorTheme.accentBlue),
-                      .bodyBold
-                      .copyWith(
-                          color: StreamChatTheme.of(context)
-                              .colorTheme
-                              .accentBlue),
                 ),
               ),
             ],
@@ -2291,6 +2262,7 @@ class __PickerWidgetState extends State<_PickerWidget> {
             return const Center(child: CircularProgressIndicator());
           }
 
+          final chatThemeData = StreamChatTheme.of(context);
           if (snapshot.data!) {
             if (widget.containsFile) {
               return GestureDetector(
@@ -2299,12 +2271,12 @@ class __PickerWidgetState extends State<_PickerWidget> {
                 },
                 child: Container(
                   constraints: const BoxConstraints.expand(),
-                  color: StreamChatTheme.of(context).colorTheme.whiteSmoke,
+                  color: chatThemeData.colorTheme.whiteSmoke,
                   alignment: Alignment.center,
                   child: Text(
                     'Add more files',
                     style: TextStyle(
-                      color: StreamChatTheme.of(context).colorTheme.accentBlue,
+                      color: chatThemeData.colorTheme.accentBlue,
                       fontWeight: FontWeight.bold,
                     ),
                   ),
@@ -2322,7 +2294,7 @@ class __PickerWidgetState extends State<_PickerWidget> {
               PhotoManager.openSetting();
             },
             child: Container(
-              color: StreamChatTheme.of(context).colorTheme.whiteSmoke,
+              color: chatThemeData.colorTheme.whiteSmoke,
               child: Column(
                 mainAxisAlignment: MainAxisAlignment.center,
                 crossAxisAlignment: CrossAxisAlignment.stretch,
@@ -2331,26 +2303,21 @@ class __PickerWidgetState extends State<_PickerWidget> {
                     'svgs/icon_picture_empty_state.svg',
                     package: 'stream_chat_flutter',
                     height: 140,
-                    color: StreamChatTheme.of(context).colorTheme.greyGainsboro,
+                    color: chatThemeData.colorTheme.greyGainsboro,
                   ),
                   Text(
                     // ignore: lines_longer_than_80_chars
                     'Please enable access to your photos \nand videos so you can share them with friends.',
-                    style: StreamChatTheme.of(context).textTheme.body.copyWith(
+                    style: chatThemeData.textTheme.body
-                        color: StreamChatTheme.of(context).colorTheme.grey),
+                        .copyWith(color: chatThemeData.colorTheme.grey),
                     textAlign: TextAlign.center,
                   ),
                   const SizedBox(height: 6),
                   Center(
                     child: Text(
                       'Allow access to your gallery',
-                      style: StreamChatTheme.of(context)
+                      style: chatThemeData.textTheme.bodyBold.copyWith(
-                          .textTheme
+                        color: chatThemeData.colorTheme.accentBlue,
-                          .bodyBold
-                          .copyWith(
-                            color: StreamChatTheme.of(context)
-                                .colorTheme
-                                .accentBlue,
                       ),
                     ),
                   ),

packages/stream_chat_flutter/lib/src/message_list_view.dart

@@ -6,15 +6,15 @@ import 'package:flutter/material.dart';
 import 'package:jiffy/jiffy.dart';
 import 'package:rxdart/rxdart.dart';
 import 'package:scrollable_positioned_list/scrollable_positioned_list.dart';
+import 'package:stream_chat_flutter/src/extension.dart';
 import 'package:stream_chat_flutter/src/info_tile.dart';
 import 'package:stream_chat_flutter/src/message_widget.dart';
 import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
+import 'package:stream_chat_flutter/src/swipeable.dart';
 import 'package:stream_chat_flutter/src/system_message.dart';
+import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';
 import 'package:visibility_detector/visibility_detector.dart';
-import 'package:stream_chat_flutter/stream_chat_flutter.dart';
-import 'package:stream_chat_flutter/src/extension.dart';
-import 'package:stream_chat_flutter/src/swipeable.dart';
 
 /// Widget builder for message
 typedef MessageBuilder = Widget Function(
@@ -316,7 +316,9 @@ class _MessageListViewState extends State<MessageListView> {
   final MessageListController _messageListController = MessageListController();
 
   @override
-  Widget build(BuildContext context) => MessageListCore(
+  Widget build(BuildContext context) {
+    final chatThemeData = StreamChatTheme.of(context);
+    return MessageListCore(
       messageFilter: widget.messageFilter,
       loadingBuilder: widget.loadingBuilder ??
           (context) => const Center(
@@ -326,18 +328,12 @@ class _MessageListViewState extends State<MessageListView> {
           (context) => Center(
                 child: Text(
                   'No chats here yet...',
-                    style: StreamChatTheme.of(context)
+                  style: chatThemeData.textTheme.footnote.copyWith(
-                        .textTheme
+                      color: chatThemeData.colorTheme.black.withOpacity(.5)),
-                        .footnote
-                        .copyWith(
-                            color: StreamChatTheme.of(context)
-                                .colorTheme
-                                .black
-                                .withOpacity(.5)),
                 ),
               ),
-        messageListBuilder: widget.messageListBuilder ??
+      messageListBuilder:
-            (context, list) => _buildListView(list),
+          widget.messageListBuilder ?? (context, list) => _buildListView(list),
       messageListController: _messageListController,
       parentMessage: widget.parentMessage,
       showScrollToBottom: widget.showScrollToBottom,
@@ -345,17 +341,12 @@ class _MessageListViewState extends State<MessageListView> {
           (BuildContext context, Object error) => Center(
                 child: Text(
                   'Something went wrong',
-                    style: StreamChatTheme.of(context)
+                  style: chatThemeData.textTheme.footnote.copyWith(
-                        .textTheme
+                      color: chatThemeData.colorTheme.black.withOpacity(.5)),
-                        .footnote
-                        .copyWith(
-                            color: StreamChatTheme.of(context)
-                                .colorTheme
-                                .black
-                                .withOpacity(.5)),
                 ),
               ),
     );
+  }
 
   Widget _buildListView(List<Message> data) {
     messages = data;
@@ -448,10 +439,10 @@ 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:
+                          gradient: chatThemeData.colorTheme.bgGradient,
-                              StreamChatTheme.of(context).colorTheme.bgGradient,
                         ),
                         child: Padding(
                           padding: const EdgeInsets.all(8),
@@ -459,10 +450,8 @@ class _MessageListViewState extends State<MessageListView> {
                             // ignore: lines_longer_than_80_chars
                             '$replyCount ${replyCount == 1 ? 'Reply' : 'Replies'}',
                             textAlign: TextAlign.center,
-                            style: StreamChatTheme.of(context)
+                            style: chatThemeData
-                                .channelTheme
+                                .channelTheme.channelHeaderTheme.subtitle,
-                                .channelHeaderTheme
-                                .subtitle,
                           ),
                         ),
                       );
@@ -517,13 +506,13 @@ class _MessageListViewState extends State<MessageListView> {
                     }
                     if (i == messages.length + 1) {
                       return _buildLoadingIndicator(
-                        streamChannel,
+                        streamChannel!,
                         QueryDirection.top,
                       );
                     }
                     if (i == 0) {
                       return _buildLoadingIndicator(
-                        streamChannel,
+                        streamChannel!,
                         QueryDirection.bottom,
                       );
                     }
@@ -536,7 +525,7 @@ class _MessageListViewState extends State<MessageListView> {
                         context,
                         message,
                         messages,
-                        streamChannel,
+                        streamChannel!,
                       );
                     } else if (i == messages.length - 1) {
                       messageWidget = _buildTopMessage(
@@ -635,6 +624,7 @@ 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,
@@ -644,7 +634,7 @@ class _MessageListViewState extends State<MessageListView> {
               clipBehavior: Clip.none,
               children: [
                 FloatingActionButton(
-                  backgroundColor: StreamChatTheme.of(context).colorTheme.white,
+                  backgroundColor: chatThemeData.colorTheme.white,
                   onPressed: () {
                     if (unreadCount > 0) {
                       streamChannel!.channel.markRead();
@@ -663,7 +653,7 @@ class _MessageListViewState extends State<MessageListView> {
                     }
                   },
                   child: StreamSvgIcon.down(
-                    color: StreamChatTheme.of(context).colorTheme.black,
+                    color: chatThemeData.colorTheme.black,
                   ),
                 ),
                 if (showUnreadCount)
@@ -692,12 +682,12 @@ class _MessageListViewState extends State<MessageListView> {
       );
 
   Widget _buildLoadingIndicator(
-    StreamChannelState? streamChannel,
+    StreamChannelState streamChannel,
     QueryDirection direction,
   ) {
     final stream = direction == QueryDirection.top
-        ? streamChannel!.queryTopMessages
+        ? streamChannel.queryTopMessages
-        : streamChannel!.queryBottomMessages;
+        : streamChannel.queryBottomMessages;
     return StreamBuilder<bool>(
       key: const Key('LOADING-INDICATOR'),
       stream: stream,
@@ -764,7 +754,7 @@ class _MessageListViewState extends State<MessageListView> {
     BuildContext context,
     Message message,
     List<Message> messages,
-    StreamChannelState? streamChannel,
+    StreamChannelState streamChannel,
   ) {
     Widget messageWidget;
     if (widget.messageBuilder != null) {
@@ -790,7 +780,7 @@ class _MessageListViewState extends State<MessageListView> {
       onVisibilityChanged: (visibility) {
         final isVisible = visibility.visibleBounds != Rect.zero;
         if (isVisible) {
-          final channel = streamChannel!.channel;
+          final channel = streamChannel.channel;
           if (_upToDate &&
               channel.config?.readEvents == true &&
               channel.state!.unreadCount! > 0) {
@@ -811,6 +801,7 @@ class _MessageListViewState extends State<MessageListView> {
     final isMyMessage = message.user!.id == StreamChat.of(context).user!.id;
     final isOnlyEmoji = message.text!.isOnlyEmoji;
 
+    final chatThemeData = StreamChatTheme.of(context);
     return MessageWidget(
       showReplyMessage: false,
       showResendMessage: false,
@@ -837,8 +828,8 @@ class _MessageListViewState extends State<MessageListView> {
       borderSide: isMyMessage || isOnlyEmoji ? BorderSide.none : null,
       showUserAvatar: isMyMessage ? DisplayWidget.gone : DisplayWidget.show,
       messageTheme: isMyMessage
-          ? StreamChatTheme.of(context).ownMessageTheme
+          ? chatThemeData.ownMessageTheme
-          : StreamChatTheme.of(context).otherMessageTheme,
+          : chatThemeData.otherMessageTheme,
       onShowMessage: widget.onShowMessage,
       onReturnAction: (action) {
         switch (action) {
@@ -946,6 +937,7 @@ class _MessageListViewState extends State<MessageListView> {
             ? BorderSide.none
             : null;
 
+    final chatThemeData = StreamChatTheme.of(context);
     Widget child = MessageWidget(
       key: ValueKey<String>('MESSAGE-${message.id}'),
       message: message,
@@ -1023,8 +1015,8 @@ class _MessageListViewState extends State<MessageListView> {
         horizontal: isOnlyEmoji ? 0 : 16.0,
       ),
       messageTheme: isMyMessage
-          ? StreamChatTheme.of(context).ownMessageTheme
+          ? chatThemeData.ownMessageTheme
-          : StreamChatTheme.of(context).otherMessageTheme,
+          : chatThemeData.otherMessageTheme,
       readList: readList,
       allRead: allRead,
       onShowMessage: widget.onShowMessage,
@@ -1064,7 +1056,7 @@ class _MessageListViewState extends State<MessageListView> {
             widget.onMessageSwiped?.call(message);
           },
           backgroundIcon: StreamSvgIcon.reply(
-            color: StreamChatTheme.of(context).colorTheme.accentBlue,
+            color: chatThemeData.colorTheme.accentBlue,
           ),
           child: child,
         ),
@@ -1074,7 +1066,7 @@ class _MessageListViewState extends State<MessageListView> {
     if (!initialMessageHighlightComplete &&
         widget.highlightInitialMessage &&
         _isInitialMessage(message.id)) {
-      final colorTheme = StreamChatTheme.of(context).colorTheme;
+      final colorTheme = chatThemeData.colorTheme;
       final highlightColor =
           widget.messageHighlightColor ?? colorTheme.highlight;
       child = TweenAnimationBuilder<Color?>(
@@ -1105,8 +1097,17 @@ class _MessageListViewState extends State<MessageListView> {
     _itemPositionListener =
         widget.itemPositionListener ?? ItemPositionsListener.create();
 
-    streamChannel = StreamChannel.of(context);
+    _getOnThreadTap();
+    super.initState();
+  }
 
+  @override
+  void didChangeDependencies() {
+    final newStreamChannel = StreamChannel.of(context);
+
+    if (newStreamChannel != streamChannel) {
+      streamChannel = newStreamChannel;
+      _messageNewListener?.cancel();
       initialIndex = _initialIndex;
       initialAlignment = _initialAlignment;
 
@@ -1129,9 +1130,9 @@ class _MessageListViewState extends State<MessageListView> {
       if (_isThreadConversation) {
         streamChannel!.getReplies(widget.parentMessage!.id);
       }
+    }
 
-    _getOnThreadTap();
+    super.didChangeDependencies();
-    super.initState();
   }
 
   void _getOnThreadTap() {

packages/stream_chat_flutter/lib/src/message_reactions_modal.dart

@@ -1,13 +1,13 @@
 import 'dart:ui';
 
 import 'package:flutter/material.dart';
+import 'package:stream_chat_flutter/src/extension.dart';
 import 'package:stream_chat_flutter/src/reaction_bubble.dart';
 import 'package:stream_chat_flutter/src/reaction_picker.dart';
 import 'package:stream_chat_flutter/src/stream_chat.dart';
 import 'package:stream_chat_flutter/src/user_avatar.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';
-import 'package:stream_chat_flutter/src/extension.dart';
 
 /// Modal widget for displaying message reactions
 class MessageReactionsModal extends StatelessWidget {
@@ -176,8 +176,9 @@ class MessageReactionsModal extends StatelessWidget {
 
   Widget _buildReactionCard(BuildContext context) {
     final currentUser = StreamChat.of(context).user;
+    final chatThemeData = StreamChatTheme.of(context);
     return Card(
-      color: StreamChatTheme.of(context).colorTheme.white,
+      color: chatThemeData.colorTheme.white,
       clipBehavior: Clip.hardEdge,
       shape: RoundedRectangleBorder(
         borderRadius: BorderRadius.circular(16),
@@ -190,7 +191,7 @@ class MessageReactionsModal extends StatelessWidget {
           children: [
             Text(
               'Message Reactions',
-              style: StreamChatTheme.of(context).textTheme.headlineBold,
+              style: chatThemeData.textTheme.headlineBold,
             ),
             const SizedBox(height: 16),
             Flexible(
@@ -220,6 +221,7 @@ class MessageReactionsModal extends StatelessWidget {
     BuildContext context,
   ) {
     final isCurrentUser = reaction.user?.id == currentUser.id;
+    final chatThemeData = StreamChatTheme.of(context);
     return ConstrainedBox(
       constraints: BoxConstraints.loose(const Size(
         64,
@@ -258,7 +260,7 @@ class MessageReactionsModal extends StatelessWidget {
                         messageTheme.reactionsBorderColor ?? Colors.transparent,
                     backgroundColor: messageTheme.reactionsBackgroundColor ??
                         Colors.transparent,
-                    maskColor: StreamChatTheme.of(context).colorTheme.white,
+                    maskColor: chatThemeData.colorTheme.white,
                     tailCirclesSpacing: 1,
                     highlightOwnReactions: false,
                   ),
@@ -269,7 +271,7 @@ class MessageReactionsModal extends StatelessWidget {
           const SizedBox(height: 8),
           Text(
             reaction.user!.name.split(' ')[0],
-            style: StreamChatTheme.of(context).textTheme.footnoteBold,
+            style: chatThemeData.textTheme.footnoteBold,
             textAlign: TextAlign.center,
           ),
         ],

packages/stream_chat_flutter/lib/src/message_search_item.dart

@@ -35,6 +35,7 @@ class MessageSearchItem extends StatelessWidget {
     final channel = getMessageResponse.channel;
     final channelName = channel?.extraData['name'];
     final user = message.user!;
+    final chatThemeData = StreamChatTheme.of(context);
     return ListTile(
       onTap: onTap,
       leading: UserAvatar(
@@ -49,21 +50,18 @@ class MessageSearchItem extends StatelessWidget {
         children: [
           Text(
             user.id == StreamChat.of(context).user?.id ? 'You' : user.name,
-            style: StreamChatTheme.of(context).channelPreviewTheme.title,
+            style: chatThemeData.channelPreviewTheme.title,
           ),
           if (channelName != null) ...[
             Text(
               ' in ',
-              style: StreamChatTheme.of(context)
+              style: chatThemeData.channelPreviewTheme.title?.copyWith(
-                  .channelPreviewTheme
-                  .title
-                  ?.copyWith(
                 fontWeight: FontWeight.normal,
               ),
             ),
             Text(
               channelName as String,
-              style: StreamChatTheme.of(context).channelPreviewTheme.title,
+              style: chatThemeData.channelPreviewTheme.title,
             ),
           ],
         ],
@@ -121,17 +119,18 @@ class MessageSearchItem extends StatelessWidget {
       text = parts.join(' ');
     }
 
+    final chatThemeData = StreamChatTheme.of(context);
     return Text.rich(
       _getDisplayText(
         text!,
         message.mentionedUsers,
         message.attachments,
-        StreamChatTheme.of(context).channelPreviewTheme.subtitle?.copyWith(
+        chatThemeData.channelPreviewTheme.subtitle?.copyWith(
           fontStyle: (message.isSystem || message.isDeleted)
               ? FontStyle.italic
               : FontStyle.normal,
         ),
-        StreamChatTheme.of(context).channelPreviewTheme.subtitle?.copyWith(
+        chatThemeData.channelPreviewTheme.subtitle?.copyWith(
           fontStyle: (message.isSystem || message.isDeleted)
               ? FontStyle.italic
               : FontStyle.normal,

packages/stream_chat_flutter/lib/src/message_search_list_view.dart

@@ -1,8 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:stream_chat_flutter/src/info_tile.dart';
 import 'package:stream_chat_flutter/src/message_search_item.dart';
-import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
+import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';
 
 /// Callback called when tapping on a user
 typedef MessageSearchItemTapCallback = void Function(GetMessageResponse);
@@ -270,12 +270,13 @@ class _MessageSearchListViewState extends State<MessageSearchListView> {
     );
 
     if (widget.showResultCount) {
+      final chatThemeData = StreamChatTheme.of(context);
       child = Column(
         children: [
           Container(
             width: double.maxFinite,
             decoration: BoxDecoration(
-              gradient: StreamChatTheme.of(context).colorTheme.bgGradient,
+              gradient: chatThemeData.colorTheme.bgGradient,
             ),
             child: Padding(
               padding: const EdgeInsets.symmetric(
@@ -285,7 +286,7 @@ class _MessageSearchListViewState extends State<MessageSearchListView> {
               child: Text(
                 '${items.length} results',
                 style: TextStyle(
-                  color: StreamChatTheme.of(context).colorTheme.grey,
+                  color: chatThemeData.colorTheme.grey,
                 ),
               ),
             ),

packages/stream_chat_flutter/lib/src/message_text.dart

@@ -1,8 +1,8 @@
 import 'package:collection/collection.dart' show IterableExtension;
 import 'package:flutter/material.dart';
 import 'package:flutter_markdown/flutter_markdown.dart';
-import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
+import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';
 
 /// Text widget to display in message
 class MessageText extends StatelessWidget {
@@ -31,6 +31,7 @@ class MessageText extends StatelessWidget {
   Widget build(BuildContext context) {
     final text = _replaceMentions(message.text ?? '').replaceAll('\n', '\\\n');
 
+    final themeData = Theme.of(context);
     return MarkdownBody(
       data: text,
       onTapLink: (
@@ -60,8 +61,8 @@ class MessageText extends StatelessWidget {
         }
       },
       styleSheet: MarkdownStyleSheet.fromTheme(
-        Theme.of(context).copyWith(
+        themeData.copyWith(
-          textTheme: Theme.of(context).textTheme.apply(
+          textTheme: themeData.textTheme.apply(
             bodyColor: messageTheme.messageText?.color,
             decoration: messageTheme.messageText?.decoration,
             decorationColor: messageTheme.messageText?.decorationColor,

packages/stream_chat_flutter/lib/src/message_widget.dart

@@ -8,6 +8,8 @@ import 'package:flutter/rendering.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_portal/flutter_portal.dart';
 import 'package:jiffy/jiffy.dart';
+import 'package:stream_chat_flutter/src/extension.dart';
+import 'package:stream_chat_flutter/src/image_group.dart';
 import 'package:stream_chat_flutter/src/message_action.dart';
 import 'package:stream_chat_flutter/src/message_actions_modal.dart';
 import 'package:stream_chat_flutter/src/message_reactions_modal.dart';
@@ -15,8 +17,6 @@ import 'package:stream_chat_flutter/src/quoted_message_widget.dart';
 import 'package:stream_chat_flutter/src/reaction_bubble.dart';
 import 'package:stream_chat_flutter/src/url_attachment.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
-import 'package:stream_chat_flutter/src/image_group.dart';
-import 'package:stream_chat_flutter/src/extension.dart';
 
 /// Widget builder for building attachments
 typedef AttachmentBuilder = Widget Function(
@@ -109,6 +109,7 @@ class MessageWidget extends StatefulWidget {
               borderRadius: attachmentBorderRadiusGeometry ?? BorderRadius.zero,
             );
 
+            final mediaQueryData = MediaQuery.of(context);
             if (attachments.length > 1) {
               return Padding(
                 padding: attachmentPadding,
@@ -118,8 +119,8 @@ class MessageWidget extends StatefulWidget {
                     color: messageTheme.messageBackgroundColor,
                     child: ImageGroup(
                       size: Size(
-                        MediaQuery.of(context).size.width * 0.8,
+                        mediaQueryData.size.width * 0.8,
-                        MediaQuery.of(context).size.height * 0.3,
+                        mediaQueryData.size.height * 0.3,
                       ),
                       images: attachments,
                       message: message,
@@ -142,8 +143,8 @@ class MessageWidget extends StatefulWidget {
                 message: message,
                 messageTheme: messageTheme,
                 size: Size(
-                  MediaQuery.of(context).size.width * 0.8,
+                  mediaQueryData.size.width * 0.8,
-                  MediaQuery.of(context).size.height * 0.3,
+                  mediaQueryData.size.height * 0.3,
                 ),
                 onShowMessage: onShowMessage,
                 onReturnAction: onReturnAction,
@@ -167,13 +168,14 @@ class MessageWidget extends StatefulWidget {
             return wrapAttachmentWidget(
               context,
               Column(
-                children: attachments
+                children: attachments.map((attachment) {
-                    .map((attachment) => VideoAttachment(
+                  final mediaQueryData = MediaQuery.of(context);
+                  return VideoAttachment(
                     attachment: attachment,
                     messageTheme: messageTheme,
                     size: Size(
-                            MediaQuery.of(context).size.width * 0.8,
+                      mediaQueryData.size.width * 0.8,
-                            MediaQuery.of(context).size.height * 0.3,
+                      mediaQueryData.size.height * 0.3,
                     ),
                     message: message,
                     onShowMessage: onShowMessage,
@@ -183,8 +185,8 @@ class MessageWidget extends StatefulWidget {
                             onAttachmentTap(message, attachment);
                           }
                         : null,
-                        ))
+                  );
-                    .toList(),
+                }).toList(),
               ),
               border,
               reverse,
@@ -200,18 +202,19 @@ class MessageWidget extends StatefulWidget {
             return wrapAttachmentWidget(
               context,
               Column(
-                children: attachments
+                children: attachments.map((attachment) {
-                    .map((attachment) => GiphyAttachment(
+                  final mediaQueryData = MediaQuery.of(context);
+                  return GiphyAttachment(
                     attachment: attachment,
                     message: message,
                     size: Size(
-                            MediaQuery.of(context).size.width * 0.8,
+                      mediaQueryData.size.width * 0.8,
-                            MediaQuery.of(context).size.height * 0.3,
+                      mediaQueryData.size.height * 0.3,
                     ),
                     onShowMessage: onShowMessage,
                     onReturnAction: onReturnAction,
-                        ))
+                  );
-                    .toList(),
+                }).toList(),
               ),
               border,
               reverse,
@@ -230,21 +233,24 @@ class MessageWidget extends StatefulWidget {
 
             return Column(
               children: attachments
-                  .map<Widget>((attachment) => wrapAttachmentWidget(
+                  .map<Widget>((attachment) {
+                    final mediaQueryData = MediaQuery.of(context);
+                    return wrapAttachmentWidget(
                       context,
                       FileAttachment(
                         message: message,
                         attachment: attachment,
                         size: Size(
-                            MediaQuery.of(context).size.width * 0.8,
+                          mediaQueryData.size.width * 0.8,
-                            MediaQuery.of(context).size.height * 0.3,
+                          mediaQueryData.size.height * 0.3,
                         ),
                       ),
                       border,
                       reverse,
                       attachmentBorderRadiusGeometry as BorderRadius? ??
                           BorderRadius.zero,
-                      ))
+                    );
+                  })
                   .insertBetween(SizedBox(
                     height: attachmentPadding.vertical / 2,
                   ))
@@ -648,12 +654,13 @@ class _MessageWidgetState extends State<MessageWidget>
             widget.onQuotedMessageTap != null
         ? () => widget.onQuotedMessageTap!(widget.message.quotedMessageId)
         : null;
+    final chatThemeData = StreamChatTheme.of(context);
     return QuotedMessageWidget(
       onTap: onTap,
       message: widget.message.quotedMessage!,
       messageTheme: isMyMessage
-          ? StreamChatTheme.of(context).otherMessageTheme
+          ? chatThemeData.otherMessageTheme
-          : StreamChatTheme.of(context).ownMessageTheme,
+          : chatThemeData.ownMessageTheme,
       reverse: widget.reverse,
       padding: EdgeInsets.only(
           right: 8, left: 8, top: 8, bottom: hasNonUrlAttachments ? 8 : 0),
@@ -662,20 +669,19 @@ class _MessageWidgetState extends State<MessageWidget>
 
   Widget get _bottomRow {
     if (isDeleted) {
+      final chatThemeData = StreamChatTheme.of(context);
       return Row(
         mainAxisSize: MainAxisSize.min,
         children: [
           StreamSvgIcon.eye(
-            color: StreamChatTheme.of(context).colorTheme.grey,
+            color: chatThemeData.colorTheme.grey,
             size: 16,
           ),
           const SizedBox(width: 8),
           Text(
             'Only visible to you',
-            style: StreamChatTheme.of(context)
+            style: chatThemeData.textTheme.footnote
-                .textTheme
+                .copyWith(color: chatThemeData.colorTheme.grey),
-                .footnote
-                .copyWith(color: StreamChatTheme.of(context).colorTheme.grey),
           ),
         ],
       );

packages/stream_chat_flutter/lib/src/option_list_tile.dart

@@ -41,15 +41,16 @@ class OptionListTile extends StatelessWidget {
   final TextStyle? titleTextStyle;
 
   @override
-  Widget build(BuildContext context) => Column(
+  Widget build(BuildContext context) {
+    final chatThemeData = StreamChatTheme.of(context);
+    return Column(
       children: [
         Container(
-            color: separatorColor ??
+          color: separatorColor ?? chatThemeData.colorTheme.greyGainsboro,
-                StreamChatTheme.of(context).colorTheme.greyGainsboro,
           height: 1,
         ),
         Material(
-            color: tileColor ?? StreamChatTheme.of(context).colorTheme.white,
+          color: tileColor ?? chatThemeData.colorTheme.white,
           child: SizedBox(
             height: 63,
             child: InkWell(
@@ -67,11 +68,8 @@ class OptionListTile extends StatelessWidget {
                       title!,
                       style: titleTextStyle ??
                           (titleColor == null
-                                ? StreamChatTheme.of(context).textTheme.bodyBold
+                              ? chatThemeData.textTheme.bodyBold
-                                : StreamChatTheme.of(context)
+                              : chatThemeData.textTheme.bodyBold.copyWith(
-                                    .textTheme
-                                    .bodyBold
-                                    .copyWith(
                                   color: titleColor,
                                 )),
                     ),
@@ -94,3 +92,4 @@ class OptionListTile extends StatelessWidget {
       ],
     );
   }
+}

packages/stream_chat_flutter/lib/src/reaction_bubble.dart

@@ -121,6 +121,8 @@ class ReactionBubble extends StatelessWidget {
       (r) => r.type == reaction.type,
     );
 
+    final chatThemeData = StreamChatTheme.of(context);
+    final userId = StreamChat.of(context).user?.id;
     return Padding(
       padding: const EdgeInsets.symmetric(
         horizontal: 4,
@@ -130,24 +132,16 @@ class ReactionBubble extends StatelessWidget {
               assetName: reactionIcon.assetName,
               width: 16,
               height: 16,
-              color: (!highlightOwnReactions ||
+              color: (!highlightOwnReactions || reaction.user?.id == userId)
-                      reaction.user?.id == StreamChat.of(context).user?.id)
+                  ? chatThemeData.colorTheme.accentBlue
-                  ? StreamChatTheme.of(context).colorTheme.accentBlue
+                  : chatThemeData.colorTheme.black.withOpacity(.5),
-                  : StreamChatTheme.of(context)
-                      .colorTheme
-                      .black
-                      .withOpacity(.5),
             )
           : Icon(
               Icons.help_outline_rounded,
               size: 16,
-              color: (!highlightOwnReactions ||
+              color: (!highlightOwnReactions || reaction.user?.id == userId)
-                      reaction.user?.id == StreamChat.of(context).user?.id)
+                  ? chatThemeData.colorTheme.accentBlue
-                  ? StreamChatTheme.of(context).colorTheme.accentBlue
+                  : chatThemeData.colorTheme.black.withOpacity(.5),
-                  : StreamChatTheme.of(context)
-                      .colorTheme
-                      .black
-                      .withOpacity(.5),
             ),
     );
   }

packages/stream_chat_flutter/lib/src/reaction_picker.dart

@@ -2,8 +2,8 @@ import 'dart:math';
 
 import 'package:ezanimation/ezanimation.dart';
 import 'package:flutter/material.dart';
-import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
 import 'package:stream_chat_flutter/src/extension.dart';
+import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
 /// ![screenshot](https://raw.githubusercontent.com/GetStream/stream-chat-flutter/master/screenshots/reaction_picker.png)
@@ -33,7 +33,8 @@ class _ReactionPickerState extends State<ReactionPicker>
 
   @override
   Widget build(BuildContext context) {
-    final reactionIcons = StreamChatTheme.of(context).reactionIcons;
+    final chatThemeData = StreamChatTheme.of(context);
+    final reactionIcons = chatThemeData.reactionIcons;
 
     if (animations.isEmpty && reactionIcons.isNotEmpty) {
       reactionIcons.forEach((element) {
@@ -57,7 +58,7 @@ class _ReactionPickerState extends State<ReactionPicker>
               scale: val,
               child: Material(
                 borderRadius: BorderRadius.circular(24),
-                color: StreamChatTheme.of(context).colorTheme.white,
+                color: chatThemeData.colorTheme.white,
                 clipBehavior: Clip.hardEdge,
                 child: Padding(
                   padding: const EdgeInsets.symmetric(
@@ -119,9 +120,8 @@ class _ReactionPickerState extends State<ReactionPicker>
                                             animations[index].value * 24.0,
                                           ),
                                           color: ownReactionIndex != -1
-                                              ? StreamChatTheme.of(context)
+                                              ? chatThemeData
-                                                  .colorTheme
+                                                  .colorTheme.accentBlue
-                                                  .accentBlue
                                               : Theme.of(context)
                                                   .iconTheme
                                                   .color!

packages/stream_chat_flutter/lib/src/thread_header.dart

@@ -97,7 +97,9 @@ class ThreadHeader extends StatelessWidget implements PreferredSizeWidget {
   final List<Widget>? actions;
 
   @override
-  Widget build(BuildContext context) => AppBar(
+  Widget build(BuildContext context) {
+    final chatThemeData = StreamChatTheme.of(context);
+    return AppBar(
       automaticallyImplyLeading: false,
       brightness: Theme.of(context).brightness,
       elevation: 1,
@@ -109,8 +111,7 @@ class ThreadHeader extends StatelessWidget implements PreferredSizeWidget {
                   showUnreads: true,
                 )
               : const SizedBox()),
-        backgroundColor:
+      backgroundColor: chatThemeData.channelTheme.channelHeaderTheme.color,
-            StreamChatTheme.of(context).channelTheme.channelHeaderTheme.color,
       centerTitle: true,
       actions: actions,
       title: InkWell(
@@ -123,10 +124,7 @@ class ThreadHeader extends StatelessWidget implements PreferredSizeWidget {
               title ??
                   Text(
                     'Thread Reply',
-                      style: StreamChatTheme.of(context)
+                    style: chatThemeData.channelTheme.channelHeaderTheme.title,
-                          .channelTheme
-                          .channelHeaderTheme
-                          .title,
                   ),
               const SizedBox(height: 2),
               subtitle ??
@@ -136,17 +134,13 @@ class ThreadHeader extends StatelessWidget implements PreferredSizeWidget {
                     children: [
                       Text(
                         'with ',
-                          style: StreamChatTheme.of(context)
+                        style: chatThemeData
-                              .channelTheme
+                            .channelTheme.channelHeaderTheme.subtitle,
-                              .channelHeaderTheme
-                              .subtitle,
                       ),
                       Flexible(
                         child: ChannelName(
-                            textStyle: StreamChatTheme.of(context)
+                          textStyle: chatThemeData
-                                .channelTheme
+                              .channelTheme.channelHeaderTheme.subtitle,
-                                .channelHeaderTheme
-                                .subtitle,
                         ),
                       ),
                     ],
@@ -156,6 +150,7 @@ class ThreadHeader extends StatelessWidget implements PreferredSizeWidget {
         ),
       ),
     );
+  }
 
   @override
   final Size preferredSize;

packages/stream_chat_flutter/lib/src/url_attachment.dart

@@ -26,7 +26,9 @@ class UrlAttachment extends StatelessWidget {
   final EdgeInsets textPadding;
 
   @override
-  Widget build(BuildContext context) => GestureDetector(
+  Widget build(BuildContext context) {
+    final chatThemeData = StreamChatTheme.of(context);
+    return GestureDetector(
       onTap: () {
         launchURL(
           context,
@@ -58,8 +60,7 @@ class UrlAttachment extends StatelessWidget {
                         borderRadius: const BorderRadius.only(
                           topRight: Radius.circular(16),
                         ),
-                          color:
+                        color: chatThemeData.colorTheme.blueAlice,
-                              StreamChatTheme.of(context).colorTheme.blueAlice,
                       ),
                       child: Padding(
                         padding: const EdgeInsets.only(
@@ -69,13 +70,8 @@ class UrlAttachment extends StatelessWidget {
                         ),
                         child: Text(
                           hostDisplayName,
-                            style: StreamChatTheme.of(context)
+                          style: chatThemeData.textTheme.bodyBold.copyWith(
-                                .textTheme
+                            color: chatThemeData.colorTheme.accentBlue,
-                                .bodyBold
-                                .copyWith(
-                                  color: StreamChatTheme.of(context)
-                                      .colorTheme
-                                      .accentBlue,
                           ),
                         ),
                       ),
@@ -94,17 +90,13 @@ class UrlAttachment extends StatelessWidget {
                     urlAttachment.title!.trim(),
                     maxLines: 1,
                     overflow: TextOverflow.ellipsis,
-                      style: StreamChatTheme.of(context)
+                    style: chatThemeData.textTheme.body
-                          .textTheme
-                          .body
                         .copyWith(fontWeight: FontWeight.w700),
                   ),
                 if (urlAttachment.text != null)
                   Text(
                     urlAttachment.text!,
-                      style: StreamChatTheme.of(context)
+                    style: chatThemeData.textTheme.body
-                          .textTheme
-                          .body
                         .copyWith(fontWeight: FontWeight.w400),
                   ),
               ],
@@ -114,3 +106,4 @@ class UrlAttachment extends StatelessWidget {
       ),
     );
   }
+}

packages/stream_chat_flutter/lib/src/user_avatar.dart

@@ -1,7 +1,7 @@
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
-import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
+import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';
 
 /// Widget that displays a user avatar
 class UserAvatar extends StatelessWidget {
@@ -95,8 +95,7 @@ class UserAvatar extends StatelessWidget {
         child: Container(
           constraints: constraints ??
               streamChatTheme.ownMessageTheme.avatarTheme?.constraints,
-          color: selectionColor ??
+          color: selectionColor ?? streamChatTheme.colorTheme.accentBlue,
-              StreamChatTheme.of(context).colorTheme.accentBlue,
           child: Padding(
             padding: EdgeInsets.all(selectionThickness),
             child: avatar,

packages/stream_chat_flutter/lib/src/user_item.dart

@@ -48,7 +48,9 @@ class UserItem extends StatelessWidget {
   final bool showLastOnline;
 
   @override
-  Widget build(BuildContext context) => ListTile(
+  Widget build(BuildContext context) {
+    final chatThemeData = StreamChatTheme.of(context);
+    return ListTile(
       onTap: () {
         if (onTap != null) {
           onTap!(user);
@@ -73,22 +75,25 @@ class UserItem extends StatelessWidget {
       ),
       trailing: selected
           ? StreamSvgIcon.checkSend(
-                color: StreamChatTheme.of(context).colorTheme.accentBlue,
+              color: chatThemeData.colorTheme.accentBlue,
             )
           : null,
       title: Text(
         user.name,
-          style: StreamChatTheme.of(context).textTheme.bodyBold,
+        style: chatThemeData.textTheme.bodyBold,
       ),
       subtitle: showLastOnline ? _buildLastActive(context) : null,
     );
+  }
 
-  Widget _buildLastActive(context) => Text(
+  Widget _buildLastActive(context) {
+    final chatTheme = StreamChatTheme.of(context);
+    return Text(
       user.online == true
           ? 'Online'
           : 'Last online ${Jiffy(user.lastActive).fromNow()}',
-        style: StreamChatTheme.of(context).textTheme.footnote.copyWith(
+      style: chatTheme.textTheme.footnote
-            color:
+          .copyWith(color: chatTheme.colorTheme.black.withOpacity(.5)),
-                StreamChatTheme.of(context).colorTheme.black.withOpacity(.5)),
     );
   }
+}

packages/stream_chat_flutter/lib/src/user_list_view.dart

@@ -295,9 +295,11 @@ class _UserListViewState extends State<UserListView>
     if (i < items.length) {
       final item = items[i];
       return item.when(
-        headerItem: (header) => Container(
+        headerItem: (header) {
+          final chatThemeData = StreamChatTheme.of(context);
+          return Container(
             key: ValueKey<String>('HEADER-$header'),
-          color: StreamChatTheme.of(context).colorTheme.black.withOpacity(0.05),
+            color: chatThemeData.colorTheme.black.withOpacity(0.05),
             child: Padding(
               padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
               child: Text(
@@ -305,11 +307,12 @@ class _UserListViewState extends State<UserListView>
                 style: TextStyle(
                   fontWeight: FontWeight.bold,
                   fontSize: 14.5,
-                color: StreamChatTheme.of(context).colorTheme.grey,
+                  color: chatThemeData.colorTheme.grey,
-              ),
                 ),
               ),
             ),
+          );
+        },
         userItem: (user) {
           final selected = widget.selectedUsers?.contains(user) ?? false;
           return Container(

packages/stream_chat_flutter/lib/src/utils.dart

@@ -1,9 +1,9 @@
 import 'dart:math';
 
 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';
 import 'package:url_launcher/url_launcher.dart';
-import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
 /// Launch URL
 Future<void> launchURL(BuildContext context, String? url) async {
@@ -27,9 +27,10 @@ Future<bool?> showConfirmationDialog(
   Widget? icon,
   String? question,
   String? cancelText,
-}) =>
+}) {
-    showModalBottomSheet(
+  final chatThemeData = StreamChatTheme.of(context);
-        backgroundColor: StreamChatTheme.of(context).colorTheme.white,
+  return showModalBottomSheet(
+      backgroundColor: chatThemeData.colorTheme.white,
       context: context,
       shape: const RoundedRectangleBorder(
           borderRadius: BorderRadius.only(
@@ -37,7 +38,7 @@ Future<bool?> showConfirmationDialog(
         topRight: Radius.circular(16),
       )),
       builder: (context) {
-          final effect = StreamChatTheme.of(context).colorTheme.borderTop;
+        final effect = chatThemeData.colorTheme.borderTop;
         return SafeArea(
           child: Column(
             mainAxisSize: MainAxisSize.min,
@@ -47,7 +48,7 @@ Future<bool?> showConfirmationDialog(
               const SizedBox(height: 26),
               Text(
                 title,
-                  style: StreamChatTheme.of(context).textTheme.headlineBold,
+                style: chatThemeData.textTheme.headlineBold,
               ),
               const SizedBox(height: 7),
               if (question != null)
@@ -72,13 +73,8 @@ Future<bool?> showConfirmationDialog(
                           },
                           child: Text(
                             cancelText,
-                              style: StreamChatTheme.of(context)
+                            style: chatThemeData.textTheme.bodyBold.copyWith(
-                                  .textTheme
+                                color: chatThemeData.colorTheme.black
-                                  .bodyBold
-                                  .copyWith(
-                                      color: StreamChatTheme.of(context)
-                                          .colorTheme
-                                          .black
                                     .withOpacity(0.5)),
                           ),
                         ),
@@ -93,13 +89,8 @@ Future<bool?> showConfirmationDialog(
                         },
                         child: Text(
                           okText,
-                            style: StreamChatTheme.of(context)
+                          style: chatThemeData.textTheme.bodyBold.copyWith(
-                                .textTheme
+                              color: chatThemeData.colorTheme.accentRed),
-                                .bodyBold
-                                .copyWith(
-                                    color: StreamChatTheme.of(context)
-                                        .colorTheme
-                                        .accentRed),
                         ),
                       ),
                     ),
@@ -110,6 +101,7 @@ Future<bool?> showConfirmationDialog(
           ),
         );
       });
+}
 
 /// Shows info dialog
 Future<bool?> showInfoDialog(
@@ -119,10 +111,10 @@ Future<bool?> showInfoDialog(
   Widget? icon,
   String? details,
   StreamChatThemeData? theme,
-}) =>
+}) {
-    showModalBottomSheet(
+  final chatThemeData = StreamChatTheme.of(context);
-      backgroundColor: theme?.colorTheme.white ??
+  return showModalBottomSheet(
-          StreamChatTheme.of(context).colorTheme.white,
+    backgroundColor: theme?.colorTheme.white ?? chatThemeData.colorTheme.white,
     context: context,
     shape: const RoundedRectangleBorder(
         borderRadius: BorderRadius.only(
@@ -143,7 +135,7 @@ Future<bool?> showInfoDialog(
           Text(
             title,
             style: theme?.textTheme.headlineBold ??
-                  StreamChatTheme.of(context).textTheme.headlineBold,
+                chatThemeData.textTheme.headlineBold,
           ),
           const SizedBox(
             height: 7,
@@ -154,7 +146,7 @@ Future<bool?> showInfoDialog(
           ),
           Container(
             color: theme?.colorTheme.black.withOpacity(.08) ??
-                  StreamChatTheme.of(context).colorTheme.black.withOpacity(.08),
+                chatThemeData.colorTheme.black.withOpacity(.08),
             height: 1,
           ),
           Center(
@@ -166,7 +158,7 @@ Future<bool?> showInfoDialog(
                 okText,
                 style: TextStyle(
                   color: theme?.colorTheme.black.withOpacity(0.5) ??
-                        StreamChatTheme.of(context).colorTheme.accentBlue,
+                      chatThemeData.colorTheme.accentBlue,
                   fontWeight: FontWeight.w400,
                 ),
               ),
@@ -176,6 +168,7 @@ Future<bool?> showInfoDialog(
       ),
     ),
   );
+}
 
 /// Get random png with initials
 String getRandomPicUrl(User user) =>

packages/stream_chat_flutter/lib/src/video_thumbnail_image.dart

@@ -2,9 +2,9 @@ import 'dart:typed_data';
 
 import 'package:flutter/material.dart';
 import 'package:shimmer/shimmer.dart';
+import 'package:stream_chat_flutter/src/video_service.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 import 'package:video_thumbnail/video_thumbnail.dart';
-import 'package:stream_chat_flutter/src/video_service.dart';
 
 /// Widget for creating video thumbnail image
 class VideoThumbnailImage extends StatefulWidget {
@@ -47,6 +47,7 @@ class VideoThumbnailImage extends StatefulWidget {
 
 class _VideoThumbnailImageState extends State<VideoThumbnailImage> {
   late Future<Uint8List?> thumbnailFuture;
+  late StreamChatThemeData _streamChatTheme;
 
   @override
   void initState() {
@@ -57,6 +58,12 @@ class _VideoThumbnailImageState extends State<VideoThumbnailImage> {
     super.initState();
   }
 
+  @override
+  void didChangeDependencies() {
+    _streamChatTheme = StreamChatTheme.of(context);
+    super.didChangeDependencies();
+  }
+
   @override
   void didUpdateWidget(covariant VideoThumbnailImage oldWidget) {
     if (oldWidget.video != widget.video || oldWidget.format != widget.format) {
@@ -87,11 +94,8 @@ class _VideoThumbnailImageState extends State<VideoThumbnailImage> {
                   constraints: const BoxConstraints.expand(),
                   child: widget.placeholderBuilder?.call(context) ??
                       Shimmer.fromColors(
-                        baseColor: StreamChatTheme.of(context)
+                        baseColor: _streamChatTheme.colorTheme.greyGainsboro,
-                            .colorTheme
+                        highlightColor: _streamChatTheme.colorTheme.whiteSmoke,
-                            .greyGainsboro,
-                        highlightColor:
-                            StreamChatTheme.of(context).colorTheme.whiteSmoke,
                         child: Image.asset(
                           'images/placeholder.png',
                           fit: BoxFit.cover,

packages/stream_chat_flutter_core/lib/src/channel_list_core.dart

@@ -119,12 +119,11 @@ class ChannelListCore extends StatefulWidget {
 
 /// The current state of the [ChannelListCore].
 class ChannelListCoreState extends State<ChannelListCore> {
-  @override
+  late ChannelsBlocState _channelsBloc;
-  Widget build(BuildContext context) {
+  StreamChatCoreState? _streamChatCoreState;
-    final channelsBloc = ChannelsBloc.of(context);
 
-    return _buildListView(channelsBloc);
+  @override
-  }
+  Widget build(BuildContext context) => _buildListView(_channelsBloc);
 
   StreamBuilder<List<Channel>> _buildListView(
     ChannelsBlocState channelsBlocState,
@@ -147,36 +146,41 @@ class ChannelListCoreState extends State<ChannelListCore> {
       );
 
   /// Fetches initial channels and updates the widget
-  Future<void> loadData() {
+  Future<void> loadData() => _channelsBloc.queryChannels(
-    final channelsBloc = ChannelsBloc.of(context);
-    return channelsBloc.queryChannels(
         filter: widget.filter,
         sortOptions: widget.sort,
         paginationParams: widget.pagination,
         options: widget.options,
       );
-  }
 
   /// Fetches more channels with updated pagination and updates the widget
-  Future<void> paginateData() {
+  Future<void> paginateData() => _channelsBloc.queryChannels(
-    final channelsBloc = ChannelsBloc.of(context);
-    return channelsBloc.queryChannels(
         filter: widget.filter,
         sortOptions: widget.sort,
         paginationParams: widget.pagination.copyWith(
-        offset: channelsBloc.channels?.length ?? 0,
+          offset: _channelsBloc.channels?.length ?? 0,
         ),
         options: widget.options,
       );
-  }
 
-  late StreamSubscription<Event> _subscription;
+  StreamSubscription<Event>? _subscription;
 
   @override
   void initState() {
     super.initState();
+    _setupController();
+  }
+
+  @override
+  void didChangeDependencies() {
+    _channelsBloc = ChannelsBloc.of(context);
+    final newStreamChatCoreState = StreamChatCore.of(context);
+
+    if (newStreamChatCoreState != _streamChatCoreState) {
+      _streamChatCoreState = newStreamChatCoreState;
       loadData();
-    final client = StreamChatCore.of(context).client;
+      final client = _streamChatCoreState!.client;
+      _subscription?.cancel();
       _subscription = client
           .on(
             EventType.connectionRecovered,
@@ -185,11 +189,9 @@ class ChannelListCoreState extends State<ChannelListCore> {
             EventType.channelVisible,
           )
           .listen((event) => loadData());
-
-    if (widget.channelListController != null) {
-      widget.channelListController!.loadData = loadData;
-      widget.channelListController!.paginateData = paginateData;
     }
+
+    super.didChangeDependencies();
   }
 
   @override
@@ -203,11 +205,22 @@ class ChannelListCoreState extends State<ChannelListCore> {
             oldWidget.pagination.toJson().toString()) {
       loadData();
     }
+
+    if (widget.channelListController != oldWidget.channelListController) {
+      _setupController();
+    }
+  }
+
+  void _setupController() {
+    if (widget.channelListController != null) {
+      widget.channelListController!.loadData = loadData;
+      widget.channelListController!.paginateData = paginateData;
+    }
   }
 
   @override
   void dispose() {
-    _subscription.cancel();
+    _subscription?.cancel();
     super.dispose();
   }
 }

packages/stream_chat_flutter_core/lib/src/channels_bloc.dart

@@ -50,17 +50,20 @@ class ChannelsBloc extends StatefulWidget {
 
     streamChatState = context.findAncestorStateOfType<ChannelsBlocState>();
 
-    if (streamChatState == null) {
+    assert(
-      throw Exception('You must have a ChannelsBloc widget as ancestor');
+      streamChatState != null,
-    }
+      'You must have a ChannelsBloc widget as ancestor',
+    );
 
-    return streamChatState;
+    return streamChatState!;
   }
 }
 
 /// The current state of the [ChannelsBloc].
 class ChannelsBlocState extends State<ChannelsBloc>
     with AutomaticKeepAliveClientMixin {
+  StreamChatCoreState? _streamChatCoreState;
+
   @override
   Widget build(BuildContext context) {
     super.build(context);
@@ -86,6 +89,8 @@ class ChannelsBlocState extends State<ChannelsBloc>
 
   bool _paginationEnded = false;
 
+  final List<StreamSubscription> _subscriptions = [];
+
   /// Calls [client.queryChannels] updating [queryChannelsLoading] stream
   Future<void> queryChannels({
     Filter? filter,
@@ -93,7 +98,7 @@ class ChannelsBlocState extends State<ChannelsBloc>
     PaginationParams paginationParams = const PaginationParams(limit: 30),
     Map<String, dynamic>? options,
   }) async {
-    final client = StreamChatCore.of(context).client;
+    final client = _streamChatCoreState!.client;
 
     final clear = paginationParams.offset == 0;
 
@@ -139,14 +144,15 @@ class ChannelsBlocState extends State<ChannelsBloc>
     }
   }
 
-  final List<StreamSubscription> _subscriptions = [];
-
   @override
-  void initState() {
+  void didChangeDependencies() {
-    super.initState();
+    final newStreamChatCoreState = StreamChatCore.of(context);
 
-    final client = StreamChatCore.of(context).client;
+    if (newStreamChatCoreState != _streamChatCoreState) {
+      _streamChatCoreState = newStreamChatCoreState;
+      final client = _streamChatCoreState!.client;
 
+      _cancelSubscriptions();
       if (!widget.lockChannelsOrder) {
         _subscriptions.add(client
             .on(
@@ -161,7 +167,8 @@ class ChannelsBlocState extends State<ChannelsBloc>
               newChannels.insert(0, channel);
             }
           } else if (widget.shouldAddChannel?.call(e) == true) {
-          final hiddenIndex = _hiddenChannels.indexWhere((c) => c.cid == e.cid);
+            final hiddenIndex =
+                _hiddenChannels.indexWhere((c) => c.cid == e.cid);
             if (hiddenIndex != -1) {
               newChannels.insert(0, _hiddenChannels[hiddenIndex]);
               _hiddenChannels.removeAt(hiddenIndex);
@@ -179,37 +186,46 @@ class ChannelsBlocState extends State<ChannelsBloc>
         }));
       }
 
-    _subscriptions.add(client.on(EventType.channelHidden).listen((event) async {
+      _subscriptions
+        ..add(client.on(EventType.channelHidden).listen((event) async {
           final newChannels = List<Channel>.from(channels ?? []);
-      final channelIndex = newChannels.indexWhere((c) => c.cid == event.cid);
+          final channelIndex =
+              newChannels.indexWhere((c) => c.cid == event.cid);
           if (channelIndex > -1) {
             final channel = newChannels.removeAt(channelIndex);
             _hiddenChannels.add(channel);
             _channelsController.add(newChannels);
           }
-    }));
+        }))
-    // ignore: cascade_invocations
+        ..add(client
-    _subscriptions.add(client
             .on(
           EventType.channelDeleted,
           EventType.notificationRemovedFromChannel,
         )
             .listen((e) {
-      // ignore: cascade_invocations
           final channel = e.channel;
           _channelsController.add(List.from(
               (channels ?? [])..removeWhere((c) => c.cid == channel?.cid)));
         }));
     }
 
+    super.didChangeDependencies();
+  }
+
   @override
   void dispose() {
     _channelsController.close();
     _queryChannelsLoadingController.close();
-    _subscriptions.forEach((s) => s.cancel());
+    _cancelSubscriptions();
     super.dispose();
   }
 
+  void _cancelSubscriptions() {
+    _subscriptions
+      ..forEach((s) => s.cancel())
+      ..clear();
+  }
+
   @override
   bool get wantKeepAlive => true;
 }

packages/stream_chat_flutter_core/lib/src/message_list_core.dart

@@ -109,23 +109,23 @@ class MessageListCore extends StatefulWidget {
 
 /// The current state of the [MessageListCore].
 class MessageListCoreState extends State<MessageListCore> {
-  late StreamChannelState _streamChannel;
+  StreamChannelState? _streamChannel;
 
-  bool get _upToDate => _streamChannel.channel.state?.isUpToDate ?? true;
+  bool get _upToDate => _streamChannel!.channel.state?.isUpToDate ?? true;
 
   bool get _isThreadConversation => widget.parentMessage != null;
 
-  OwnUser? get _currentUser => _streamChannel.channel.client.state.user;
+  OwnUser? get _currentUser => _streamChannel!.channel.client.state.user;
 
   var _messages = <Message>[];
 
   @override
   Widget build(BuildContext context) {
     final messagesStream = _isThreadConversation
-        ? _streamChannel.channel.state?.threadsStream
+        ? _streamChannel!.channel.state?.threadsStream
             .where((threads) => threads.containsKey(widget.parentMessage!.id))
             .map((threads) => threads[widget.parentMessage!.id])
-        : _streamChannel.channel.state?.messagesStream;
+        : _streamChannel!.channel.state?.messagesStream;
 
     bool defaultFilter(Message m) {
       final isMyMessage = m.user?.id == _currentUser?.id;
@@ -167,31 +167,58 @@ class MessageListCoreState extends State<MessageListCore> {
     QueryDirection direction = QueryDirection.top,
   }) {
     if (!_isThreadConversation) {
-      return _streamChannel.queryMessages(direction: direction);
+      return _streamChannel!.queryMessages(direction: direction);
     } else {
-      return _streamChannel.getReplies(widget.parentMessage!.id);
+      return _streamChannel!.getReplies(widget.parentMessage!.id);
+    }
+  }
+
+  @override
+  void didChangeDependencies() {
+    final newStreamChannel = StreamChannel.of(context);
+
+    if (newStreamChannel != _streamChannel) {
+      if (_streamChannel == null /*only first time*/ && _isThreadConversation) {
+        newStreamChannel.getReplies(widget.parentMessage!.id);
+      }
+      _streamChannel = newStreamChannel;
+    }
+
+    super.didChangeDependencies();
+  }
+
+  @override
+  void didUpdateWidget(covariant MessageListCore oldWidget) {
+    super.didUpdateWidget(oldWidget);
+
+    if (widget.messageListController != oldWidget.messageListController) {
+      _setupController();
+    }
+
+    if (widget.parentMessage?.id != widget.parentMessage?.id) {
+      if (_isThreadConversation) {
+        _streamChannel!.getReplies(widget.parentMessage!.id);
+      }
     }
   }
 
   @override
   void initState() {
-    _streamChannel = StreamChannel.of(context);
+    _setupController();
 
-    if (_isThreadConversation) {
+    super.initState();
-      _streamChannel.getReplies(widget.parentMessage!.id);
   }
 
+  void _setupController() {
     if (widget.messageListController != null) {
       widget.messageListController!.paginateData = paginateData;
     }
-
-    super.initState();
   }
 
   @override
   void dispose() {
     if (!_upToDate) {
-      _streamChannel.reloadChannel();
+      _streamChannel!.reloadChannel();
     }
     super.dispose();
   }

packages/stream_chat_flutter_core/lib/src/message_search_bloc.dart

@@ -29,17 +29,20 @@ class MessageSearchBloc extends StatefulWidget {
 
     state = context.findAncestorStateOfType<MessageSearchBlocState>();
 
-    if (state == null) {
+    assert(
-      throw Exception('You must have a MessageSearchBloc widget as ancestor');
+      state != null,
-    }
+      'You must have a MessageSearchBloc widget as ancestor',
+    );
 
-    return state;
+    return state!;
   }
 }
 
 /// The current state of the [MessageSearchBloc]
 class MessageSearchBlocState extends State<MessageSearchBloc>
     with AutomaticKeepAliveClientMixin {
+  late StreamChatCoreState _streamChatCoreState;
+
   /// The current messages list
   List<GetMessageResponse>? get messageResponses => _messageResponses.value;
 
@@ -64,7 +67,7 @@ class MessageSearchBlocState extends State<MessageSearchBloc>
     String? query,
     PaginationParams? pagination,
   }) async {
-    final client = StreamChatCore.of(context).client;
+    final client = _streamChatCoreState.client;
 
     if (_queryMessagesLoadingController.value == true) return;
 
@@ -109,6 +112,12 @@ class MessageSearchBlocState extends State<MessageSearchBloc>
     return widget.child;
   }
 
+  @override
+  void didChangeDependencies() {
+    _streamChatCoreState = StreamChatCore.of(context);
+    super.didChangeDependencies();
+  }
+
   @override
   void dispose() {
     _messageResponses.close();

packages/stream_chat_flutter_core/lib/src/message_search_list_core.dart

@@ -105,9 +105,14 @@ class MessageSearchListCore extends StatefulWidget {
 
 /// The current state of the [MessageSearchListCore].
 class MessageSearchListCoreState extends State<MessageSearchListCore> {
+  MessageSearchBlocState? _messageSearchBloc;
+
   @override
   void didChangeDependencies() {
-    super.didChangeDependencies();
+    final newMessageSearchBloc = MessageSearchBloc.of(context);
+
+    if (newMessageSearchBloc != _messageSearchBloc) {
+      _messageSearchBloc = newMessageSearchBloc;
       loadData();
       if (widget.messageSearchListController != null) {
         widget.messageSearchListController!.loadData = loadData;
@@ -115,12 +120,12 @@ class MessageSearchListCoreState extends State<MessageSearchListCore> {
       }
     }
 
-  @override
+    super.didChangeDependencies();
-  Widget build(BuildContext context) {
-    final messageSearchBloc = MessageSearchBloc.of(context);
-    return _buildListView(messageSearchBloc);
   }
 
+  @override
+  Widget build(BuildContext context) => _buildListView(_messageSearchBloc!);
+
   Widget _buildListView(MessageSearchBlocState messageSearchBloc) =>
       StreamBuilder<List<GetMessageResponse>>(
         stream: messageSearchBloc.messagesStream,
@@ -140,30 +145,24 @@ class MessageSearchListCoreState extends State<MessageSearchListCore> {
       );
 
   /// Fetches initial messages and updates the widget
-  Future<void> loadData() {
+  Future<void> loadData() => _messageSearchBloc!.search(
-    final messageSearchBloc = MessageSearchBloc.of(context);
-    return messageSearchBloc.search(
         filter: widget.filters,
         sort: widget.sortOptions,
         query: widget.messageQuery,
         pagination: widget.paginationParams,
         messageFilter: widget.messageFilters,
       );
-  }
 
   /// Fetches more messages with updated pagination and updates the widget
-  Future<void> paginateData() {
+  Future<void> paginateData() => _messageSearchBloc!.search(
-    final messageSearchBloc = MessageSearchBloc.of(context);
-    return messageSearchBloc.search(
         filter: widget.filters,
         sort: widget.sortOptions,
         pagination: widget.paginationParams!.copyWith(
-        offset: messageSearchBloc.messageResponses?.length ?? 0,
+          offset: _messageSearchBloc!.messageResponses?.length ?? 0,
         ),
         query: widget.messageQuery,
         messageFilter: widget.messageFilters,
       );
-  }
 
   @override
   void didUpdateWidget(MessageSearchListCore oldWidget) {

packages/stream_chat_flutter_core/lib/src/stream_channel.dart

@@ -47,13 +47,12 @@ class StreamChannel extends StatefulWidget {
 
     streamChannelState = context.findAncestorStateOfType<StreamChannelState>();
 
-    if (streamChannelState == null) {
+    assert(
-      throw Exception(
+      streamChannelState != null,
       'You must have a StreamChannel widget at the top of your widget tree',
     );
-    }
 
-    return streamChannelState;
+    return streamChannelState!;
   }
 
   @override

packages/stream_chat_flutter_core/lib/src/stream_chat_core.dart

@@ -70,12 +70,12 @@ class StreamChatCore extends StatefulWidget {
 
     streamChatState = context.findAncestorStateOfType<StreamChatCoreState>();
 
-    if (streamChatState == null) {
+    assert(
-      throw Exception(
+      streamChatState != null,
-          'You must have a StreamChat widget at the top of your widget tree');
+      'You must have a StreamChat widget at the top of your widget tree',
-    }
+    );
 
-    return streamChatState;
+    return streamChatState!;
   }
 }
 

packages/stream_chat_flutter_core/lib/src/user_list_core.dart

@@ -122,29 +122,29 @@ class UserListCore extends StatefulWidget {
 /// The current state of the [UserListCore].
 class UserListCoreState extends State<UserListCore>
     with WidgetsBindingObserver {
+  UsersBlocState? _usersBloc;
+
   @override
   void didChangeDependencies() {
-    super.didChangeDependencies();
+    final newUsersBloc = UsersBloc.of(context);
+    if (newUsersBloc != _usersBloc) {
+      _usersBloc = newUsersBloc;
       loadData();
       if (widget.userListController != null) {
         widget.userListController!.loadData = loadData;
         widget.userListController!.paginateData = paginateData;
       }
     }
+    super.didChangeDependencies();
+  }
 
   @override
-  Widget build(BuildContext context) {
+  Widget build(BuildContext context) => _buildListView();
-    final _usersBloc = UsersBloc.of(context);
-    return _buildListView(_usersBloc);
-  }
 
   bool get _isListAlreadySorted =>
       widget.sort?.any((e) => e.field == 'name' && e.direction == 1) ?? false;
 
-  Stream<List<ListItem>> _buildUserStream(
+  Stream<List<ListItem>> _buildUserStream() => _usersBloc!.usersStream.map(
-    UsersBlocState usersBlocState,
-  ) =>
-      usersBlocState.usersStream.map(
         (users) {
           if (widget.groupAlphabetically) {
             var temp = users;
@@ -169,11 +169,8 @@ class UserListCoreState extends State<UserListCore>
         },
       );
 
-  StreamBuilder<List<ListItem>> _buildListView(
+  StreamBuilder<List<ListItem>> _buildListView() => StreamBuilder(
-    UsersBlocState usersBlocState,
+        stream: _buildUserStream(),
-  ) =>
-      StreamBuilder(
-        stream: _buildUserStream(usersBlocState),
         builder: (context, snapshot) {
           if (snapshot.hasError) {
             return widget.errorBuilder(snapshot.error!);
@@ -190,28 +187,22 @@ class UserListCoreState extends State<UserListCore>
       );
 
   // ignore: public_member_api_docs
-  Future<void> loadData() {
+  Future<void> loadData() => _usersBloc!.queryUsers(
-    final _usersBloc = UsersBloc.of(context);
-    return _usersBloc.queryUsers(
         filter: widget.filter,
         sort: widget.sort,
         pagination: widget.pagination,
         options: widget.options,
       );
-  }
 
   // ignore: public_member_api_docs
-  Future<void> paginateData() {
+  Future<void> paginateData() => _usersBloc!.queryUsers(
-    final _usersBloc = UsersBloc.of(context);
-    return _usersBloc.queryUsers(
         filter: widget.filter,
         sort: widget.sort,
         pagination: widget.pagination!.copyWith(
-        offset: _usersBloc.users?.length ?? 0,
+          offset: _usersBloc!.users?.length ?? 0,
         ),
         options: widget.options,
       );
-  }
 
   @override
   void didUpdateWidget(UserListCore oldWidget) {

packages/stream_chat_flutter_core/lib/src/users_bloc.dart

@@ -30,11 +30,12 @@ class UsersBloc extends StatefulWidget {
 
     state = context.findAncestorStateOfType<UsersBlocState>();
 
-    if (state == null) {
+    assert(
-      throw Exception('You must have a UsersBloc widget as ancestor');
+      state != null,
-    }
+      'You must have a UsersBloc widget as ancestor',
+    );
 
-    return state;
+    return state!;
   }
 }
 
@@ -54,6 +55,8 @@ class UsersBlocState extends State<UsersBloc>
   /// The stream notifying the state of queryUsers call
   Stream<bool> get queryUsersLoading => _queryUsersLoadingController.stream;
 
+  late StreamChatCoreState _streamChatCore;
+
   /// The Query Users method allows you to search for users and see if they are
   /// online/offline.
   /// [API Reference](https://getstream.io/chat/docs/flutter-dart/query_users/?language=dart)
@@ -63,7 +66,7 @@ class UsersBlocState extends State<UsersBloc>
     Map<String, dynamic>? options,
     PaginationParams? pagination,
   }) async {
-    final client = StreamChatCore.of(context).client;
+    final client = _streamChatCore.client;
 
     if (_queryUsersLoadingController.value == true) return;
 
@@ -101,6 +104,12 @@ class UsersBlocState extends State<UsersBloc>
     }
   }
 
+  @override
+  void didChangeDependencies() {
+    _streamChatCore = StreamChatCore.of(context);
+    super.didChangeDependencies();
+  }
+
   @override
   Widget build(BuildContext context) {
     super.build(context);

packages/stream_chat_flutter_core/test/channel_list_core_test.dart

@@ -46,7 +46,7 @@ void main() {
       await tester.pumpWidget(channelListCore);
 
       expect(find.byKey(channelListCoreKey), findsNothing);
-      expect(tester.takeException(), isInstanceOf<Exception>());
+      expect(tester.takeException(), isInstanceOf<AssertionError>());
     },
   );
 

packages/stream_chat_flutter_core/test/channels_bloc_test.dart

@@ -46,7 +46,7 @@ void main() {
 
       expect(find.byKey(channelsBlocKey), findsNothing);
       expect(find.byKey(childKey), findsNothing);
-      expect(tester.takeException(), isInstanceOf<Exception>());
+      expect(tester.takeException(), isInstanceOf<AssertionError>());
     },
   );
 

packages/stream_chat_flutter_core/test/message_list_core_test.dart

@@ -78,7 +78,7 @@ void main() {
       await tester.pumpWidget(messageListCore);
 
       expect(find.byKey(messageListCoreKey), findsNothing);
-      expect(tester.takeException(), isInstanceOf<Exception>());
+      expect(tester.takeException(), isInstanceOf<AssertionError>());
     },
   );
 
@@ -147,6 +147,56 @@ void main() {
     },
   );
 
+  testWidgets(
+    'should assign paginateData callback and paginate data correctly if a MessageListController is passed',
+    (tester) async {
+      const messageListCoreKey = Key('messageListCore');
+      final controller = MessageListController();
+      final messageListCore = MessageListCore(
+        key: messageListCoreKey,
+        messageListBuilder: (_, __) => Offstage(),
+        loadingBuilder: (BuildContext context) => Offstage(),
+        emptyBuilder: (BuildContext context) => Offstage(),
+        errorWidgetBuilder: (BuildContext context, Object error) => Offstage(),
+        messageListController: controller,
+      );
+
+      expect(controller.paginateData, isNull);
+
+      final mockChannel = MockChannel();
+
+      when(() => mockChannel.state.isUpToDate).thenReturn(true);
+      // when(() => mockChannel.query(
+      //       messagesPagination: any(named: 'messagesPagination'),
+      //       preferOffline: any(named: 'preferOffline'),
+      //     )).thenAnswer((_) => mockChannel.state);
+      final messages = _generateMessages();
+      when(() => mockChannel.state.messages).thenReturn(messages);
+      when(() => mockChannel.state.messagesStream)
+          .thenAnswer((_) => Stream.value(messages));
+      when(() => mockChannel.initialized).thenAnswer((_) => Future.value(true));
+
+      await tester.pumpWidget(
+        StreamChannel(
+          channel: mockChannel,
+          child: messageListCore,
+        ),
+      );
+
+      final finder = find.byKey(messageListCoreKey);
+      final coreState = tester.firstState<MessageListCoreState>(finder);
+      expect(finder, findsOneWidget);
+      expect(controller.paginateData, isNotNull);
+
+      await coreState.paginateData();
+
+      verify(() => mockChannel.query(
+            messagesPagination: any(named: 'messagesPagination'),
+            preferOffline: any(named: 'preferOffline'),
+          )).called(1);
+    },
+  );
+
   testWidgets(
     'should build error widget if messagesStream emits error',
     (tester) async {

packages/stream_chat_flutter_core/test/message_search_bloc_test.dart

@@ -35,27 +35,12 @@ void main() {
     'messageSearchBlocState.search() should throw if used where '
     'StreamChat is not present in the widget tree',
     (tester) async {
-      const messageSearchBlocKey = Key('messageSearchBloc');
-      const childKey = Key('child');
       final messageSearchBloc = MessageSearchBloc(
-        key: messageSearchBlocKey,
+        child: Offstage(),
-        child: Offstage(key: childKey),
       );
 
       await tester.pumpWidget(messageSearchBloc);
-
+      expect(tester.takeException(), isInstanceOf<AssertionError>());
-      expect(find.byKey(messageSearchBlocKey), findsOneWidget);
-      expect(find.byKey(childKey), findsOneWidget);
-
-      final usersBlocState = tester.state<MessageSearchBlocState>(
-        find.byKey(messageSearchBlocKey),
-      );
-
-      try {
-        await usersBlocState.search(filter: testFilter);
-      } catch (e) {
-        expect(e, isInstanceOf<Exception>());
-      }
     },
   );
 

packages/stream_chat_flutter_core/test/message_search_list_core_test.dart

@@ -45,7 +45,7 @@ void main() {
       await tester.pumpWidget(messageSearchListCore);
 
       expect(find.byKey(messageSearchListCoreKey), findsNothing);
-      expect(tester.takeException(), isInstanceOf<Exception>());
+      expect(tester.takeException(), isInstanceOf<AssertionError>());
     },
   );
 
@@ -107,6 +107,7 @@ void main() {
           ),
         ),
       );
+      await tester.pumpAndSettle();
 
       expect(find.byKey(messageSearchListCoreKey), findsOneWidget);
       expect(controller.loadData, isNotNull);

packages/stream_chat_flutter_core/test/user_list_core_test.dart

@@ -49,7 +49,7 @@ void main() {
       await tester.pumpWidget(userListCore);
 
       expect(find.byKey(userListCoreKey), findsNothing);
-      expect(tester.takeException(), isInstanceOf<Exception>());
+      expect(tester.takeException(), isInstanceOf<AssertionError>());
     },
   );
 

packages/stream_chat_flutter_core/test/users_bloc_test.dart

@@ -35,27 +35,12 @@ void main() {
     'usersBlocState.queryUsers() should throw if used where '
     'StreamChat is not present in the widget tree',
     (tester) async {
-      const usersBlocKey = Key('usersBloc');
-      const childKey = Key('child');
       final usersBloc = UsersBloc(
-        key: usersBlocKey,
+        child: Offstage(),
-        child: Offstage(key: childKey),
       );
 
       await tester.pumpWidget(usersBloc);
-
+      expect(tester.takeException(), isInstanceOf<AssertionError>());
-      expect(find.byKey(usersBlocKey), findsOneWidget);
-      expect(find.byKey(childKey), findsOneWidget);
-
-      final usersBlocState = tester.state<UsersBlocState>(
-        find.byKey(usersBlocKey),
-      );
-
-      try {
-        await usersBlocState.queryUsers();
-      } catch (e) {
-        expect(e, isInstanceOf<Exception>());
-      }
     },
   );