Merge pull request #60 from GetStream/fix/channel-list-scroll-performance

fix(ui): channel list performance

packages/stream_chat_v1/lib/channel_list.dart

@@ -4,6 +4,7 @@ import 'package:example/localizations.dart';
 import 'package:example/routes/routes.dart';
 import 'package:example/search_text_field.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
 import 'channel_page.dart';
@@ -16,6 +17,8 @@ class ChannelList extends StatefulWidget {
 }
 
 class _ChannelList extends State<ChannelList> {
+  ScrollController _scrollController = ScrollController();
+
   TextEditingController? _controller;
 
   String _channelQuery = '';
@@ -46,6 +49,7 @@ class _ChannelList extends State<ChannelList> {
   void dispose() {
     _controller?.removeListener(_channelQueryListener);
     _controller?.dispose();
+    _scrollController.dispose();
     super.dispose();
   }
 
@@ -61,8 +65,17 @@ class _ChannelList extends State<ChannelList> {
         }
         return true;
       },
+      child: NotificationListener<ScrollUpdateNotification>(
+        onNotification: (ScrollNotification scrollInfo) {
+          if (_scrollController.position.userScrollDirection ==
+              ScrollDirection.reverse) {
+            FocusScope.of(context).unfocus();
+          }
+          return true;
+        },
         child: NestedScrollView(
-        floatHeaderSlivers: true,
+          controller: _scrollController,
+          floatHeaderSlivers: false,
           headerSliverBuilder: (_, __) => [
             SliverToBoxAdapter(
               child: SearchTextField(
@@ -72,14 +85,8 @@ class _ChannelList extends State<ChannelList> {
               ),
             ),
           ],
-        body: AnimatedSwitcher(
+          body: _isSearchActive
-          duration: const Duration(milliseconds: 350),
+              ? MessageSearchListView(
-          child: GestureDetector(
-            behavior: HitTestBehavior.opaque,
-            onPanDown: (_) => FocusScope.of(context).unfocus(),
-            child: _isSearchActive
-                ? MessageSearchBloc(
-                    child: MessageSearchListView(
                   showErrorTile: true,
                   messageQuery: _channelQuery,
                   filters: Filter.in_('members', [user!.id]),
@@ -90,7 +97,7 @@ class _ChannelList extends State<ChannelList> {
                     ),
                   ],
                   pullToRefresh: false,
-                      limit: 20,
+                  limit: 30,
                   emptyBuilder: (_) {
                     return LayoutBuilder(
                       builder: (context, viewportConstraints) {
@@ -141,10 +148,8 @@ class _ChannelList extends State<ChannelList> {
                       ),
                     );
                   },
-                    ),
                 )
-                : ChannelsBloc(
+              : ChannelListView(
-                    child: ChannelListView(
                   onChannelTap: (channel, _) {
                     Navigator.pushNamed(
                       context,
@@ -160,7 +165,7 @@ class _ChannelList extends State<ChannelList> {
                   swipeToAction: true,
                   filter: Filter.in_('members', [user!.id]),
                   presence: true,
-                      limit: 20,
+                  limit: 30,
                   onViewInfoTap: (channel) {
                     Navigator.pop(context);
                     if (channel.memberCount == 2 && channel.isDistinct) {
@@ -170,8 +175,8 @@ class _ChannelList extends State<ChannelList> {
                           builder: (context) => StreamChannel(
                             channel: channel,
                             child: ChatInfoScreen(
-                                  messageTheme: StreamChatTheme.of(context)
+                              messageTheme:
-                                      .ownMessageTheme,
+                                  StreamChatTheme.of(context).ownMessageTheme,
                               user: channel.state!.members
                                   .where((m) =>
                                       m.userId !=
@@ -189,8 +194,8 @@ class _ChannelList extends State<ChannelList> {
                           builder: (context) => StreamChannel(
                             channel: channel,
                             child: GroupInfoScreen(
-                                  messageTheme: StreamChatTheme.of(context)
+                              messageTheme:
-                                      .ownMessageTheme,
+                                  StreamChatTheme.of(context).ownMessageTheme,
                             ),
                           ),
                         ),
@@ -200,8 +205,6 @@ class _ChannelList extends State<ChannelList> {
                 ),
         ),
       ),
-        ),
-      ),
     );
   }
 }

packages/stream_chat_v1/lib/channel_list_page.dart

@@ -100,7 +100,11 @@ class _ChannelListPageState extends State<ChannelListPage> {
       body: IndexedStack(
         index: _currentIndex,
         children: [
-          ChannelList(),
+          ChannelsBloc(
+            child: MessageSearchBloc(
+              child: ChannelList(),
+            ),
+          ),
           UserMentionsPage(),
         ],
       ),