Merge branch 'feature/new-ui' of https://github.com/GetStream/stream-chat-flutter into feature/group-info-screen

 Conflicts:

	pubspec.yaml

example/ios/Flutter/.last_build_id

@@ -1 +1 @@
-c3e639ccf9b069e37a7d1345194e6b99
+13a41b8138c4868054e44b5158f3bdd6

example/ios/Podfile.lock

@@ -40,7 +40,7 @@ PODS:
   - Firebase/Messaging (6.33.0):
     - Firebase/CoreOnly
     - FirebaseMessaging (~> 4.7.0)
-  - firebase_core (0.5.2-1):
+  - firebase_core (0.5.3):
     - Firebase/CoreOnly (~> 6.33.0)
     - Flutter
   - firebase_messaging (7.0.3):
@@ -258,7 +258,7 @@ SPEC CHECKSUMS:
   esys_flutter_share: 403498dab005b36ce1f8d7aff377e81f0621b0b4
   file_picker: 3e6c3790de664ccf9b882732d9db5eaf6b8d4eb1
   Firebase: 8db6f2d1b2c5e2984efba4949a145875a8f65fe5
-  firebase_core: 7423d688a1c6f2f2d859d64ae26991be39989781
+  firebase_core: 5d6a02f3d85acd5f8321c2d6d62877626a670659
   firebase_messaging: 0aea2cd5885b65e19ede58ee3507f485c992cc75
   FirebaseCore: d889d9e12535b7f36ac8bfbf1713a0836a3012cd
   FirebaseCoreDiagnostics: 770ac5958e1372ce67959ae4b4f31d8e127c3ac1

example/ios/fastlane/report.xml

@@ -5,39 +5,27 @@
     
     
       
-      <testcase classname="fastlane.lanes" name="0: Verifying fastlane version" time="0.00047">
+      <testcase classname="fastlane.lanes" name="0: Verifying fastlane version" time="0.00094">
         
       </testcase>
     
       
-      <testcase classname="fastlane.lanes" name="1: default_platform" time="0.000176">
+      <testcase classname="fastlane.lanes" name="1: default_platform" time="0.000521">
         
       </testcase>
     
       
-      <testcase classname="fastlane.lanes" name="2: is_ci" time="0.000168">
+      <testcase classname="fastlane.lanes" name="2: is_ci" time="0.000605">
         
       </testcase>
     
       
-      <testcase classname="fastlane.lanes" name="3: Switch to ios match_me lane" time="0.000157">
+      <testcase classname="fastlane.lanes" name="3: is_ci" time="0.000675">
         
       </testcase>
     
       
-      <testcase classname="fastlane.lanes" name="4: is_ci" time="0.000161">
+      <testcase classname="fastlane.lanes" name="4: match" time="48.727951">
-        
-      </testcase>
-    
-      
-      <testcase classname="fastlane.lanes" name="5: match" time="32.299713">
-        
-      </testcase>
-    
-      
-      <testcase classname="fastlane.lanes" name="6: gym" time="9.737819">
-        
-          <failure message="/Library/Ruby/Gems/2.6.0/gems/fastlane-2.162.0/fastlane/lib/fastlane/actions/actions_helper.rb:67:in `execute_action'&#10;/Library/Ruby/Gems/2.6.0/gems/fastlane-2.162.0/fastlane/lib/fastlane/runner.rb:255:in `block in execute_action'&#10;/Library/Ruby/Gems/2.6.0/gems/fastlane-2.162.0/fastlane/lib/fastlane/runner.rb:229:in `chdir'&#10;/Library/Ruby/Gems/2.6.0/gems/fastlane-2.162.0/fastlane/lib/fastlane/runner.rb:229:in `execute_action'&#10;/Library/Ruby/Gems/2.6.0/gems/fastlane-2.162.0/fastlane/lib/fastlane/runner.rb:157:in `trigger_action_by_name'&#10;/Library/Ruby/Gems/2.6.0/gems/fastlane-2.162.0/fastlane/lib/fastlane/fast_file.rb:159:in `method_missing'&#10;Fastfile:28:in `block (2 levels) in parsing_binding'&#10;/Library/Ruby/Gems/2.6.0/gems/fastlane-2.162.0/fastlane/lib/fastlane/lane.rb:33:in `call'&#10;/Library/Ruby/Gems/2.6.0/gems/fastlane-2.162.0/fastlane/lib/fastlane/runner.rb:49:in `block in execute'&#10;/Library/Ruby/Gems/2.6.0/gems/fastlane-2.162.0/fastlane/lib/fastlane/runner.rb:45:in `chdir'&#10;/Library/Ruby/Gems/2.6.0/gems/fastlane-2.162.0/fastlane/lib/fastlane/runner.rb:45:in `execute'&#10;/Library/Ruby/Gems/2.6.0/gems/fastlane-2.162.0/fastlane/lib/fastlane/lane_manager.rb:47:in `cruise_lane'&#10;/Library/Ruby/Gems/2.6.0/gems/fastlane-2.162.0/fastlane/lib/fastlane/command_line_handler.rb:36:in `handle'&#10;/Library/Ruby/Gems/2.6.0/gems/fastlane-2.162.0/fastlane/lib/fastlane/commands_generator.rb:108:in `block (2 levels) in run'&#10;/Library/Ruby/Gems/2.6.0/gems/commander-fastlane-4.4.6/lib/commander/command.rb:178:in `call'&#10;/Library/Ruby/Gems/2.6.0/gems/commander-fastlane-4.4.6/lib/commander/command.rb:153:in `run'&#10;/Library/Ruby/Gems/2.6.0/gems/commander-fastlane-4.4.6/lib/commander/runner.rb:476:in `run_active_command'&#10;/Library/Ruby/Gems/2.6.0/gems/fastlane-2.162.0/fastlane_core/lib/fastlane_core/ui/fastlane_runner.rb:76:in `run!'&#10;/Library/Ruby/Gems/2.6.0/gems/commander-fastlane-4.4.6/lib/commander/delegates.rb:15:in `run!'&#10;/Library/Ruby/Gems/2.6.0/gems/fastlane-2.162.0/fastlane/lib/fastlane/commands_generator.rb:352:in `run'&#10;/Library/Ruby/Gems/2.6.0/gems/fastlane-2.162.0/fastlane/lib/fastlane/commands_generator.rb:41:in `start'&#10;/Library/Ruby/Gems/2.6.0/gems/fastlane-2.162.0/fastlane/lib/fastlane/cli_tools_distributor.rb:119:in `take_off'&#10;/Library/Ruby/Gems/2.6.0/gems/fastlane-2.162.0/bin/fastlane:23:in `&lt;top (required)&gt;'&#10;/usr/local/bin/fastlane:23:in `load'&#10;/usr/local/bin/fastlane:23:in `&lt;top (required)&gt;'&#10;/Library/Ruby/Gems/2.6.0/gems/bundler-2.0.2/lib/bundler/cli/exec.rb:74:in `load'&#10;/Library/Ruby/Gems/2.6.0/gems/bundler-2.0.2/lib/bundler/cli/exec.rb:74:in `kernel_load'&#10;/Library/Ruby/Gems/2.6.0/gems/bundler-2.0.2/lib/bundler/cli/exec.rb:28:in `run'&#10;/Library/Ruby/Gems/2.6.0/gems/bundler-2.0.2/lib/bundler/cli.rb:465:in `exec'&#10;/Library/Ruby/Gems/2.6.0/gems/bundler-2.0.2/lib/bundler/vendor/thor/lib/thor/command.rb:27:in `run'&#10;/Library/Ruby/Gems/2.6.0/gems/bundler-2.0.2/lib/bundler/vendor/thor/lib/thor/invocation.rb:126:in `invoke_command'&#10;/Library/Ruby/Gems/2.6.0/gems/bundler-2.0.2/lib/bundler/vendor/thor/lib/thor.rb:387:in `dispatch'&#10;/Library/Ruby/Gems/2.6.0/gems/bundler-2.0.2/lib/bundler/cli.rb:27:in `dispatch'&#10;/Library/Ruby/Gems/2.6.0/gems/bundler-2.0.2/lib/bundler/vendor/thor/lib/thor/base.rb:466:in `start'&#10;/Library/Ruby/Gems/2.6.0/gems/bundler-2.0.2/lib/bundler/cli.rb:18:in `start'&#10;/Library/Ruby/Gems/2.6.0/gems/bundler-2.0.2/exe/bundle:30:in `block in &lt;top (required)&gt;'&#10;/Library/Ruby/Gems/2.6.0/gems/bundler-2.0.2/lib/bundler/friendly_errors.rb:124:in `with_friendly_errors'&#10;/Library/Ruby/Gems/2.6.0/gems/bundler-2.0.2/exe/bundle:22:in `&lt;top (required)&gt;'&#10;/usr/local/bin/bundle:23:in `load'&#10;/usr/local/bin/bundle:23:in `&lt;main&gt;'&#10;&#10;Error building the application - see the log above" />
         
       </testcase>
     

example/lib/chat_info_screen.dart

@@ -363,8 +363,8 @@ class __SharedGroupsScreenState extends State<_SharedGroupsScreen> {
         ),
         backgroundColor: StreamChatTheme.of(context).primaryColor,
       ),
-      body: StreamBuilder<List<Channel>>(
+      body: FutureBuilder<List<Channel>>(
-        stream: chat.client.queryChannels(
+        future: chat.client.queryChannels(
           filter: {
             r'$and': [
               {

example/lib/group_chat_details_screen.dart

@@ -133,7 +133,7 @@ class _GroupChatDetailsScreenState extends State<GroupChatDetailsScreen> {
                           context,
                           Routes.CHANNEL_PAGE,
                           ModalRoute.withName(Routes.HOME),
-                          arguments: channel,
+                          arguments: ChannelPageArgs(channel: channel),
                         );
                       },
               ),

example/lib/main.dart

@@ -215,12 +215,16 @@ class _HomePageState extends State<HomePage> {
                   alignment: Alignment.bottomCenter,
                   child: ListTile(
                     onTap: () async {
-                      await StreamChat.of(context).client.disconnect();
+                      Navigator.pop(context);
 
                       final secureStorage = FlutterSecureStorage();
                       await secureStorage.deleteAll();
-                      Navigator.pop(context);
+
-                      Navigator.pushReplacementNamed(
+                      StreamChat.of(context).client.disconnect(
+                            clearUser: true,
+                          );
+
+                      await Navigator.pushReplacementNamed(
                         context,
                         Routes.CHOOSE_USER,
                       );
@@ -296,7 +300,16 @@ class _ChannelListPageState extends State<ChannelListPage> {
   @override
   Widget build(BuildContext context) {
     final user = StreamChat.of(context).user;
-    return ChannelsBloc(
+    return WillPopScope(
+      onWillPop: () async {
+        if (_isSearchActive) {
+          _controller.clear();
+          setState(() => _isSearchActive = false);
+          return false;
+        }
+        return true;
+      },
+      child: ChannelsBloc(
         child: MessageSearchBloc(
           child: Column(
             children: [
@@ -325,7 +338,25 @@ class _ChannelListPageState extends State<ChannelListPage> {
                               ),
                             ],
                             paginationParams: PaginationParams(limit: 20),
-                          onItemTap: (message) {},
+                            onItemTap: (messageResponse) async {
+                              final client = StreamChat.of(context).client;
+                              final message = messageResponse.message;
+                              final channel = client.channel(
+                                messageResponse.channel.type,
+                                id: messageResponse.channel.id,
+                              );
+                              if (channel.state == null) {
+                                await channel.watch();
+                              }
+                              Navigator.pushNamed(
+                                context,
+                                Routes.CHANNEL_PAGE,
+                                arguments: ChannelPageArgs(
+                                  channel: channel,
+                                  initialMessage: message,
+                                ),
+                              );
+                            },
                           )
                         : ChannelListView(
                             onStartChatPressed: () {
@@ -351,75 +382,31 @@ class _ChannelListPageState extends State<ChannelListPage> {
             ],
           ),
         ),
+      ),
     );
   }
 }
 
-class ChannelQuerySearchResultPage extends StatelessWidget {
+class ChannelPageArgs {
-  final Stream<List<Message>> searchResultStream;
+  final Channel channel;
+  final Message initialMessage;
 
-  const ChannelQuerySearchResultPage({
+  const ChannelPageArgs({
-    Key key,
+    this.channel,
-    @required this.searchResultStream,
+    this.initialMessage,
-  }) : super(key: key);
+  });
-
-  @override
-  Widget build(BuildContext context) {
-    return StreamBuilder<List<Message>>(
-      initialData: const <Message>[],
-      stream: searchResultStream,
-      builder: (context, snapshot) {
-        final result = snapshot.data;
-        return Column(
-          children: [
-            if (result.isNotEmpty)
-              Container(
-                width: double.maxFinite,
-                decoration: BoxDecoration(
-                  gradient: LinearGradient(
-                    begin: Alignment.centerLeft,
-                    end: Alignment.centerRight,
-                    colors: [
-                      Colors.black.withOpacity(0.02),
-                      Colors.white.withOpacity(0.05),
-                    ],
-                    stops: [0, 1],
-                  ),
-                ),
-                child: Padding(
-                  padding: const EdgeInsets.symmetric(
-                    vertical: 8,
-                    horizontal: 8,
-                  ),
-                  child: Text(
-                    '${result.length} results',
-                    style: TextStyle(
-                      color: Colors.black.withOpacity(0.5),
-                    ),
-                  ),
-                ),
-              ),
-            Expanded(
-              child: ListView.builder(
-                itemCount: result.length,
-                itemBuilder: (context, index) {
-                  return ListTile(
-                    leading: UserAvatar(),
-                    title: Text(result[index].toJson().toString()),
-                  );
-                },
-              ),
-            ),
-          ],
-        );
-      },
-    );
-  }
 }
 
 class ChannelPage extends StatelessWidget {
+  final int initialScrollIndex;
+  final double initialAlignment;
+  final bool highlightInitialMessage;
+
   const ChannelPage({
     Key key,
+    this.initialScrollIndex,
+    this.initialAlignment,
+    this.highlightInitialMessage = false,
   }) : super(key: key);
 
   @override
@@ -473,6 +460,9 @@ class ChannelPage extends StatelessWidget {
             child: Stack(
               children: <Widget>[
                 MessageListView(
+                  initialScrollIndex: initialScrollIndex,
+                  initialAlignment: initialAlignment,
+                  highlightInitialMessage: highlightInitialMessage,
                   threadBuilder: (_, parentMessage) {
                     return ThreadPage(
                       parent: parentMessage,
@@ -507,10 +497,14 @@ class ChannelPage extends StatelessWidget {
 
 class ThreadPage extends StatelessWidget {
   final Message parent;
+  final int initialScrollIndex;
+  final double initialAlignment;
 
   ThreadPage({
     Key key,
     this.parent,
+    this.initialScrollIndex,
+    this.initialAlignment,
   }) : super(key: key);
 
   @override
@@ -524,6 +518,8 @@ class ThreadPage extends StatelessWidget {
           Expanded(
             child: MessageListView(
               parentMessage: parent,
+              initialScrollIndex: initialScrollIndex,
+              initialAlignment: initialAlignment,
             ),
           ),
           if (parent.type != 'deleted')

example/lib/new_chat_screen.dart

@@ -37,6 +37,8 @@ class _NewChatScreenState extends State<NewChatScreen> {
 
   bool _showUserList = true;
 
+  bool _channelExisted = false;
+
   void _userNameListener() {
     if (_debounce?.isActive ?? false) _debounce.cancel();
     _debounce = Timer(const Duration(milliseconds: 350), () {
@@ -56,11 +58,6 @@ class _NewChatScreenState extends State<NewChatScreen> {
 
     _searchFocusNode.addListener(() async {
       if (_searchFocusNode.hasFocus && !_showUserList) {
-        if (channel.extraData['draft'] == true) {
-          await channel.stopWatching();
-          channel.dispose();
-          channel.client.state.channels.remove(channel.cid);
-        }
         setState(() {
           _showUserList = true;
         });
@@ -71,6 +68,29 @@ class _NewChatScreenState extends State<NewChatScreen> {
       if (_messageInputFocusNode.hasFocus && _selectedUsers.isNotEmpty) {
         final chatState = StreamChat.of(context);
 
+        final res = await chatState.client.queryChannels(
+          options: {
+            'state': false,
+            'watch': false,
+          },
+          filter: {
+            'members': [
+              ..._selectedUsers.map((e) => e.id),
+              chatState.user.id,
+            ],
+            'distinct': true,
+          },
+          messageLimit: 0,
+          paginationParams: PaginationParams(
+            limit: 1,
+          ),
+        );
+
+        final _channelExisted = res.length == 1;
+        if (_channelExisted) {
+          channel = res.first;
+          await channel.watch();
+        } else {
           channel = chatState.client.channel(
             'messaging',
             extraData: {
@@ -78,12 +98,8 @@ class _NewChatScreenState extends State<NewChatScreen> {
                 ..._selectedUsers.map((e) => e.id),
                 chatState.user.id,
               ],
-            'draft': true,
             },
           );
-
-        if (!chatState.client.state.channels.containsKey(channel.cid)) {
-          await channel.watch();
         }
 
         setState(() {
@@ -134,6 +150,7 @@ class _NewChatScreenState extends State<NewChatScreen> {
                 return GestureDetector(
                   onTap: () {
                     _chipInputTextFieldState.removeItem(user);
+                    _searchFocusNode.requestFocus();
                   },
                   child: Stack(
                     alignment: AlignmentDirectional.centerStart,
@@ -311,18 +328,38 @@ class _NewChatScreenState extends State<NewChatScreen> {
                         ),
                       ),
                     )
-                  : MessageListView(),
+                  : FutureBuilder<bool>(
+                      future: channel.initialized,
+                      builder: (context, snapshot) {
+                        if (snapshot.data == true) {
+                          return MessageListView();
+                        }
+
+                        return Center(
+                          child: Text(
+                            'No chats here yet...',
+                            style: TextStyle(
+                              fontSize: 12,
+                              color: Colors.black.withOpacity(.5),
+                            ),
+                          ),
+                        );
+                      },
+                    ),
             ),
             MessageInput(
               focusNode: _messageInputFocusNode,
+              preMessageSending: (message) async {
+                await channel.watch();
+                return message;
+              },
               onMessageSent: (m) {
-                if (!m.isEphemeral) {
+                Navigator.pushNamedAndRemoveUntil(
-                  _updateChannelAndNavigate(context);
+                  context,
-                } else {
+                  Routes.CHANNEL_PAGE,
-                  channel.on('message.new').first.then((_) {
+                  ModalRoute.withName(Routes.HOME),
-                    _updateChannelAndNavigate(context);
+                  arguments: ChannelPageArgs(channel: channel),
-                  });
+                );
-                }
               },
             ),
           ],
@@ -330,16 +367,4 @@ class _NewChatScreenState extends State<NewChatScreen> {
       ),
     );
   }
-
-  void _updateChannelAndNavigate(BuildContext context) {
-    channel.update({
-      'draft': false,
-    });
-    Navigator.pushNamedAndRemoveUntil(
-      context,
-      Routes.CHANNEL_PAGE,
-      ModalRoute.withName(Routes.HOME),
-      arguments: channel,
-    );
-  }
 }

example/lib/routes/app_routes.dart

@@ -36,9 +36,13 @@ class AppRoutes {
         return MaterialPageRoute(
             settings: const RouteSettings(name: Routes.CHANNEL_PAGE),
             builder: (_) {
+              final arg = args as ChannelPageArgs;
               return StreamChannel(
-                channel: args as Channel,
+                channel: arg.channel,
-                child: ChannelPage(),
+                initialMessageId: arg.initialMessage?.id,
+                child: ChannelPage(
+                  highlightInitialMessage: arg.initialMessage != null,
+                ),
               );
             });
       case Routes.NEW_CHAT:

example/pubspec.yaml

@@ -1,6 +1,6 @@
 name: example
 description: A new Flutter project.
-version: 1.0.88+90
+version: 1.0.94+97
 
 environment:
   sdk: ">=2.2.2 <3.0.0"

lib/src/channels_bloc.dart

@@ -85,7 +85,7 @@ class ChannelsBlocState extends State<ChannelsBloc>
           paginationParams.offset == null ||
           paginationParams.offset == 0;
       final oldChannels = List<Channel>.from(channels ?? []);
-      client
+      await client
           .queryChannels(
         filter: filter,
         sort: sortOptions,
@@ -93,21 +93,18 @@ class ChannelsBlocState extends State<ChannelsBloc>
         paginationParams: paginationParams,
         onlyOffline: onlyOffline,
       )
-          .listen((channels) {
+          .then((channels) {
         if (clear) {
           _channelsController.add(channels);
         } else {
           final l = oldChannels + channels;
           _channelsController.add(l);
         }
-      }, onDone: () {
         _queryChannelsLoadingController.sink.add(false);
-      }, onError: (err, stackTrace) {
-        print(err);
-        print(stackTrace);
-        _queryChannelsLoadingController.addError(err, stackTrace);
       });
     } catch (err, stackTrace) {
+      print(err);
+      print(stackTrace);
       _queryChannelsLoadingController.addError(err, stackTrace);
     }
   }

lib/src/lazy_load_scroll_view.dart

@@ -1,33 +1,47 @@
+import 'package:flutter/foundation.dart';
 import 'package:flutter/widgets.dart';
 
-enum LoadingStatus { LOADING, STABLE }
+enum _LoadingStatus { LOADING, STABLE }
 
-/// Signature for EndOfPageListeners
+/// A widget that wraps a [Widget] and will trigger [onEndOfPage]/[onStartOfPage] when it
-typedef EndOfPageListenerCallback = void Function();
+/// reaches the bottom/start of the list
-
-/// A widget that wraps a [Widget] and will trigger [onEndOfPage] when it
-/// reaches the bottom of the list
 class LazyLoadScrollView extends StatefulWidget {
   /// The [Widget] that this widget watches for changes on
   final Widget child;
 
-  /// Called when the [child] reaches the end of the list
+  /// Called when the [child] reaches the start of the list
-  final EndOfPageListenerCallback onEndOfPage;
+  final AsyncCallback onStartOfPage;
 
-  /// The offset to take into account when triggering [onEndOfPage] in pixels
+  /// Called when the [child] reaches the end of the list
-  final int scrollOffset;
+  final AsyncCallback onEndOfPage;
+
+  /// Called when the list scrolling starts
+  final VoidCallback onPageScrollStart;
+
+  /// Called when the list scrolling ends
+  final VoidCallback onPageScrollEnd;
+
+  /// Called every time the [child] is in-between the list
+  final VoidCallback onInBetweenOfPage;
+
+  /// The offset to take into account when triggering [onEndOfPage]/[onStartOfPage] in pixels
+  final double scrollOffset;
 
   /// Used to determine if loading of new data has finished. You should use set this if you aren't using a FutureBuilder or StreamBuilder
   final bool isLoading;
 
+  /// Initiates a LazyLoadScrollView widget
   LazyLoadScrollView({
     Key key,
     @required this.child,
-    @required this.onEndOfPage,
+    this.onStartOfPage,
+    this.onEndOfPage,
+    this.onPageScrollStart,
+    this.onPageScrollEnd,
+    this.onInBetweenOfPage,
     this.isLoading = false,
     this.scrollOffset = 100,
-  })  : assert(onEndOfPage != null),
+  })  : assert(child != null),
-        assert(child != null),
         super(key: key);
 
   @override
@@ -35,15 +49,8 @@ class LazyLoadScrollView extends StatefulWidget {
 }
 
 class _LazyLoadScrollViewState extends State<LazyLoadScrollView> {
-  LoadingStatus _loadMoreStatus = LoadingStatus.STABLE;
+  _LoadingStatus _loadMoreStatus = _LoadingStatus.STABLE;
-
+  double _scrollPosition = 0.0;
-  @override
-  void didUpdateWidget(LazyLoadScrollView oldWidget) {
-    super.didUpdateWidget(oldWidget);
-    if (!widget.isLoading) {
-      _loadMoreStatus = LoadingStatus.STABLE;
-    }
-  }
 
   @override
   Widget build(BuildContext context) {
@@ -54,28 +61,88 @@ class _LazyLoadScrollViewState extends State<LazyLoadScrollView> {
   }
 
   bool _onNotification(Notification notification) {
+    if (notification is ScrollStartNotification) {
+      if (widget.onPageScrollStart != null) {
+        widget.onPageScrollStart();
+        return true;
+      }
+    }
+    if (notification is ScrollEndNotification) {
+      if (widget.onPageScrollEnd != null) {
+        widget.onPageScrollEnd();
+        return true;
+      }
+    }
     if (notification is ScrollUpdateNotification) {
-      if (notification.metrics.maxScrollExtent > notification.metrics.pixels &&
+      final pixels = notification.metrics.pixels;
-          notification.metrics.maxScrollExtent - notification.metrics.pixels <=
+      final maxScrollExtent = notification.metrics.maxScrollExtent;
-              widget.scrollOffset) {
+      final minScrollExtent = notification.metrics.minScrollExtent;
-        if (_loadMoreStatus != null &&
+      final scrollOffset = widget.scrollOffset;
-            _loadMoreStatus == LoadingStatus.STABLE) {
+
-          _loadMoreStatus = LoadingStatus.LOADING;
+      if (pixels > (minScrollExtent + scrollOffset) &&
-          widget.onEndOfPage();
+          pixels < (maxScrollExtent - scrollOffset)) {
+        if (widget.onInBetweenOfPage != null) {
+          widget.onInBetweenOfPage();
+          return true;
         }
       }
+
+      final extentBefore = notification.metrics.extentBefore;
+      final extentAfter = notification.metrics.extentAfter;
+      final scrollingDown = _scrollPosition < pixels;
+
+      if (scrollOffset == null || scrollOffset == 0) {
+        if (extentAfter == 0) {
+          _onEndOfPage();
+        }
+        if (extentBefore == 0) {
+          _onStartOfPage();
+        }
+      } else {
+        if (scrollingDown) {
+          if (extentAfter <= scrollOffset) {
+            _onEndOfPage();
+          }
+        } else {
+          if (extentBefore <= scrollOffset) {
+            _onStartOfPage();
+          }
+        }
+      }
+      _scrollPosition = pixels;
       return true;
     }
     if (notification is OverscrollNotification) {
       if (notification.overscroll > 0) {
-        if (_loadMoreStatus != null &&
+        _onEndOfPage();
-            _loadMoreStatus == LoadingStatus.STABLE) {
-          _loadMoreStatus = LoadingStatus.LOADING;
-          widget.onEndOfPage();
       }
+      if (notification.overscroll < 0) {
+        _onStartOfPage();
       }
       return true;
     }
     return false;
   }
+
+  void _onEndOfPage() {
+    if (_loadMoreStatus != null && _loadMoreStatus == _LoadingStatus.STABLE) {
+      _loadMoreStatus = _LoadingStatus.LOADING;
+      if (widget.onEndOfPage != null) {
+        widget.onEndOfPage().whenComplete(() {
+          _loadMoreStatus = _LoadingStatus.STABLE;
+        });
+      }
+    }
+  }
+
+  void _onStartOfPage() {
+    if (_loadMoreStatus != null && _loadMoreStatus == _LoadingStatus.STABLE) {
+      _loadMoreStatus = _LoadingStatus.LOADING;
+      if (widget.onStartOfPage != null) {
+        widget.onStartOfPage().whenComplete(() {
+          _loadMoreStatus = _LoadingStatus.STABLE;
+        });
+      }
+    }
+  }
 }

lib/src/message_input.dart

@@ -21,7 +21,6 @@ import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
 import 'package:stream_chat_flutter/src/user_avatar.dart';
 import 'package:substring_highlight/substring_highlight.dart';
 import 'package:video_compress/video_compress.dart';
-import 'package:photo_manager/photo_manager.dart';
 
 import '../stream_chat_flutter.dart';
 import 'stream_channel.dart';
@@ -343,7 +342,10 @@ class MessageInputState extends State<MessageInput> {
         mainAxisAlignment: MainAxisAlignment.spaceEvenly,
         children: [
           if (!widget.disableAttachments) _buildAttachmentButton(),
-          if (widget.editMessage == null) _buildCommandButton(),
+          if (widget.editMessage == null &&
+              StreamChannel.of(context).channel?.config?.commands?.isNotEmpty ==
+                  true)
+            _buildCommandButton(),
         ],
       ),
       duration: Duration(milliseconds: 300),
@@ -459,6 +461,7 @@ class MessageInputState extends State<MessageInput> {
   }
 
   Timer _debounce;
+
   void _onChanged(BuildContext context, String s) {
     if (_debounce?.isActive == true) _debounce.cancel();
     _debounce = Timer(
@@ -545,9 +548,10 @@ class MessageInputState extends State<MessageInput> {
       var matchedCommandsList = StreamChannel.of(context)
               .channel
               .config
-          .commands
+              ?.commands
-          .where((element) => element.name == s.substring(1))
+              ?.where((element) => element.name == s.substring(1))
-          .toList();
+              ?.toList() ??
+          [];
 
       if (matchedCommandsList.length == 1) {
         _chosenCommand = matchedCommandsList[0];
@@ -570,9 +574,10 @@ class MessageInputState extends State<MessageInput> {
     final commands = StreamChannel.of(context)
             .channel
             .config
-        .commands
+            ?.commands
-        .where((c) => c.name.contains(text.replaceFirst('/', '')))
+            ?.where((c) => c.name.contains(text.replaceFirst('/', '')))
-        .toList();
+            ?.toList() ??
+        [];
 
     RenderBox renderBox = context.findRenderObject();
     final size = renderBox.size;
@@ -1282,10 +1287,11 @@ class MessageInputState extends State<MessageInput> {
             children: [
               if (_attachments.any((e) => e.attachment?.type == 'file'))
                 LimitedBox(
-                  maxHeight: 73.0,
+                  maxHeight: 136.0,
                   child: ListView(
-                    scrollDirection: Axis.horizontal,
+                    reverse: true,
-                    children: _attachments
+                    shrinkWrap: true,
+                    children: _attachments.reversed
                         .where((e) => e.attachment?.type == 'file')
                         .map(
                           (e) => Padding(
@@ -1299,8 +1305,8 @@ class MessageInputState extends State<MessageInput> {
                                 attachmentType: FileAttachmentType.local,
                                 file: e.file,
                                 size: Size(
-                                  MediaQuery.of(context).size.width * 0.55,
+                                  MediaQuery.of(context).size.width * 0.65,
-                                  MediaQuery.of(context).size.height * 0.3,
+                                  56.0,
                                 ),
                                 trailing: Padding(
                                   padding: const EdgeInsets.all(8.0),
@@ -1927,8 +1933,6 @@ class MessageInputState extends State<MessageInput> {
     _mentionsOverlay?.remove();
     _mentionsOverlay = null;
 
-    final channel = StreamChannel.of(context).channel;
-
     Future sendingFuture;
     Message message;
     if (widget.editMessage != null) {
@@ -1953,6 +1957,12 @@ class MessageInputState extends State<MessageInput> {
       message = await widget.preMessageSending(message);
     }
 
+    final streamChannel = StreamChannel.of(context);
+    final channel = streamChannel.channel;
+    if (!channel.state.isUpToDate) {
+      await streamChannel.reloadChannel();
+    }
+
     if (widget.editMessage == null ||
         widget.editMessage.status == MessageSendingStatus.FAILED) {
       sendingFuture = channel.sendMessage(message);
@@ -2038,6 +2048,7 @@ class MessageInputState extends State<MessageInput> {
   }
 
   bool _initialized = false;
+
   @override
   void didChangeDependencies() {
     if (widget.editMessage != null && !_initialized) {

lib/src/message_list_view.dart

@@ -1,10 +1,13 @@
 import 'dart:async';
 import 'dart:math';
 
+import 'package:flutter/cupertino.dart';
 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/stream_chat.dart';
+import 'package:stream_chat_flutter/src/lazy_load_scroll_view.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/system_message.dart';
@@ -108,10 +111,11 @@ class MessageListView extends StatefulWidget {
     this.onThreadTap,
     this.dateDividerBuilder,
     this.scrollPhysics = const AlwaysScrollableScrollPhysics(),
-    this.initialScrollIndex = 0,
+    this.initialScrollIndex,
-    this.initialAlignment = 0,
+    this.initialAlignment,
     this.scrollController,
     this.itemPositionListener,
+    this.highlightInitialMessage = false,
   }) : super(key: key);
 
   /// Function used to build a custom message widget
@@ -153,6 +157,11 @@ class MessageListView extends StatefulWidget {
   /// The ScrollPhysics used by the ListView
   final ScrollPhysics scrollPhysics;
 
+  /// If true the list will highlight the initialMessage if there is any.
+  ///
+  /// Also See [StreamChannel]
+  final bool highlightInitialMessage;
+
   @override
   _MessageListViewState createState() => _MessageListViewState();
 }
@@ -160,10 +169,50 @@ class MessageListView extends StatefulWidget {
 class _MessageListViewState extends State<MessageListView> {
   ItemScrollController _scrollController;
   bool _bottomWasVisible = false;
-  bool _topWasVisible = false;
   Function _onThreadTap;
   bool _showScrollToBottom = false;
   ItemPositionsListener _itemPositionListener;
+  int _messageListLength;
+
+  int get _initialIndex {
+    if (widget.initialScrollIndex != null) return widget.initialScrollIndex;
+    final streamChannel = StreamChannel.of(context);
+    if (streamChannel.initialMessageId != null) {
+      final messages = streamChannel.channel.state.messages;
+      final totalMessages = messages.length;
+      final messageIndex = messages.indexWhere((e) {
+        return e.id == streamChannel.initialMessageId;
+      });
+      final index = totalMessages - messageIndex;
+      if (index != 0) return index - 1;
+      return index;
+    }
+    return 0;
+  }
+
+  double get _initialAlignment {
+    if (widget.initialAlignment != null) return widget.initialAlignment;
+    return 0;
+  }
+
+  bool _isInitialMessage(String id) {
+    final streamChannel = StreamChannel.of(context);
+    return streamChannel.initialMessageId == id;
+  }
+
+  bool get _upToDate => StreamChannel.of(context).channel.state.isUpToDate;
+
+  bool _topPaginationActive = false;
+  bool _bottomPaginationActive = false;
+
+  int initialIndex;
+  double initialAlignment;
+
+  List<Message> messages = <Message>[];
+
+  bool initialMessageHighlightComplete = false;
+
+  bool _inBetweenList = false;
 
   @override
   Widget build(BuildContext context) {
@@ -173,15 +222,22 @@ class _MessageListViewState extends State<MessageListView> {
         ? 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;
 
-    return StreamBuilder<List<Message>>(
+    return WillPopScope(
-        stream: messagesStream.map((messages) => messages
+      onWillPop: () async {
-            .where((e) =>
+        if (!_upToDate) {
+          await streamChannel.reloadChannel();
+        }
+        return true;
+      },
+      child: StreamBuilder<List<Message>>(
+          stream: messagesStream?.map((messages) => messages
+              ?.where((e) =>
                   !e.isDeleted ||
                   (e.isDeleted &&
                       e.user.id == streamChannel.channel.client.state.user.id))
-            .toList()),
+              ?.toList()),
           builder: (context, snapshot) {
             if (!snapshot.hasData) {
               return Center(
@@ -189,9 +245,10 @@ class _MessageListViewState extends State<MessageListView> {
               );
             }
 
-          final messages = snapshot.data?.reversed?.toList() ?? [];
+            final messageList = snapshot.data?.reversed?.toList() ?? [];
 
-          if (messages.isEmpty) {
+            if (messageList.isEmpty) {
+              if (_upToDate) {
                 return Center(
                   child: Text(
                     'No chats here yet...',
@@ -202,24 +259,73 @@ class _MessageListViewState extends State<MessageListView> {
                   ),
                 );
               }
+            } else {
+              messages = messageList;
+            }
+
+            final newMessagesListLength = messages.length;
+
+            if (_messageListLength != null) {
+              if (_bottomPaginationActive || (_inBetweenList && _upToDate)) {
+                if (_itemPositionListener.itemPositions.value?.isNotEmpty ==
+                    true) {
+                  final first = _itemPositionListener.itemPositions.value.first;
+                  final diff = newMessagesListLength - _messageListLength;
+                  if (diff > 0) {
+                    initialIndex = first.index + diff;
+                    initialAlignment = first.itemLeadingEdge;
+                  }
+                }
+              } else if (!_topPaginationActive && _upToDate) {
+                // Reset the index in-case we send any new message
+                initialIndex = 0;
+                initialAlignment = 0;
+              }
+            }
+
+            _messageListLength = newMessagesListLength;
 
             return Stack(
               alignment: Alignment.center,
               children: [
-              ScrollablePositionedList.builder(
+                LazyLoadScrollView(
+                  onStartOfPage: () async {
+                    _inBetweenList = false;
+                    if (!_upToDate) {
+                      _topPaginationActive = false;
+                      _bottomPaginationActive = true;
+                      return _paginateData(
+                        streamChannel,
+                        QueryDirection.bottom,
+                      );
+                    }
+                  },
+                  onEndOfPage: () async {
+                    _inBetweenList = false;
+                    _topPaginationActive = true;
+                    _bottomPaginationActive = false;
+                    return _paginateData(
+                      streamChannel,
+                      QueryDirection.top,
+                    );
+                  },
+                  onInBetweenOfPage: () {
+                    _inBetweenList = true;
+                  },
+                  child: ScrollablePositionedList.builder(
+                    key: ValueKey(initialIndex + initialAlignment),
                     itemPositionsListener: _itemPositionListener,
                     addAutomaticKeepAlives: true,
-                key: Key('messageListView'),
+                    initialScrollIndex: initialIndex ?? 0,
-                initialScrollIndex: widget.initialScrollIndex,
+                    initialAlignment: initialAlignment ?? 0,
-                initialAlignment: widget.initialAlignment,
                     physics: widget.scrollPhysics,
                     itemScrollController: _scrollController,
                     reverse: true,
                     itemCount: messages.length +
-                    1 +
+                        2 +
                         (widget.parentMessage != null ? 1 : 0),
                     itemBuilder: (context, i) {
-                  if (i == messages.length + 1) {
+                      if (i == messages.length + 2) {
                         if (widget.parentMessageBuilder != null) {
                           return widget.parentMessageBuilder(
                             context,
@@ -231,31 +337,41 @@ class _MessageListViewState extends State<MessageListView> {
                             children: <Widget>[
                               buildParentMessage(widget.parentMessage),
                               Padding(
-                            padding: const EdgeInsets.symmetric(horizontal: 32),
+                                padding:
+                                    const EdgeInsets.symmetric(horizontal: 32),
                                 child: Container(
                                   padding: const EdgeInsets.all(8),
                                   child: Text(
                                     'Start of thread',
                                     textAlign: TextAlign.center,
                                   ),
-                              color:
+                                  color: Theme.of(context)
-                                  Theme.of(context).accentColor.withAlpha(50),
+                                      .accentColor
+                                      .withAlpha(50),
                                 ),
                               ),
                             ],
                           );
                         }
                       }
-
+                      if (i == messages.length + 1) {
-                  if (i == messages.length) {
+                        return _buildLoadingIndicator(
-                    return _buildLoadingIndicator(streamChannel);
+                          streamChannel,
+                          QueryDirection.top,
+                        );
                       }
-                  final message = messages[i];
+                      if (i == 0) {
-                  final nextMessage = i > 0 ? messages[i - 1] : null;
+                        return _buildLoadingIndicator(
+                          streamChannel,
+                          QueryDirection.bottom,
+                        );
+                      }
+                      final message = messages[i - 1];
+                      final nextMessage = (i - 1) > 0 ? messages[i - 2] : null;
 
                       Widget messageWidget;
 
-                  if (i == 0) {
+                      if (i == 1) {
                         messageWidget = _buildBottomMessage(
                           context,
                           message,
@@ -289,14 +405,15 @@ class _MessageListViewState extends State<MessageListView> {
                       }
 
                       if (nextMessage != null &&
-                      !Jiffy(message.createdAt.toLocal())
+                          !Jiffy(message.createdAt.toLocal()).isSame(
-                          .isSame(nextMessage.createdAt.toLocal(), Units.DAY)) {
+                              nextMessage.createdAt.toLocal(), Units.DAY)) {
                         return Column(
                           crossAxisAlignment: CrossAxisAlignment.stretch,
                           children: <Widget>[
                             messageWidget,
                             Padding(
-                          padding: const EdgeInsets.symmetric(vertical: 12.0),
+                              padding:
+                                  const EdgeInsets.symmetric(vertical: 12.0),
                               child: widget.dateDividerBuilder != null
                                   ? widget.dateDividerBuilder(
                                       nextMessage.createdAt.toLocal())
@@ -311,8 +428,8 @@ class _MessageListViewState extends State<MessageListView> {
                       return messageWidget;
                     },
                   ),
-              if (widget.showScrollToBottom && _showScrollToBottom)
+                ),
-                _buildScrollToBottom(),
+                if (widget.showScrollToBottom) _buildScrollToBottom(),
                 Positioned(
                   top: 20.0,
                   child: ValueListenableBuilder<Iterable<ItemPosition>>(
@@ -345,7 +462,17 @@ class _MessageListViewState extends State<MessageListView> {
                 ),
               ],
             );
-        });
+          }),
+    );
+  }
+
+  Future<void> _paginateData(
+      StreamChannelState channel, QueryDirection direction) {
+    if (widget.parentMessage == null) {
+      return channel.queryMessages(direction: direction);
+    } else {
+      return channel.getReplies(widget.parentMessage.id);
+    }
   }
 
   ItemPosition _getTopElement(Iterable<ItemPosition> values) {
@@ -357,6 +484,27 @@ class _MessageListViewState extends State<MessageListView> {
 
   Widget _buildScrollToBottom() {
     final streamChannel = StreamChannel.of(context);
+    return StreamBuilder<Tuple2<bool, int>>(
+      stream: Rx.combineLatest2(
+        streamChannel.channel.state.isUpToDateStream,
+        streamChannel.channel.state.unreadCountStream,
+        (bool isUpToDate, int unreadCount) => Tuple2(isUpToDate, unreadCount),
+      ),
+      builder: (_, snapshot) {
+        if (snapshot.hasError) {
+          return Offstage();
+        } else if (!snapshot.hasData) {
+          return Offstage();
+        }
+        final isUpToDate = snapshot.data.item1;
+        final showScrollToBottom = !isUpToDate || _showScrollToBottom;
+        if (!showScrollToBottom) {
+          return Offstage();
+        }
+        final unreadCount = snapshot.data.item2;
+        final showUnreadCount = unreadCount > 0 &&
+            streamChannel.channel.state.members.any(
+                (e) => e.userId == streamChannel.channel.client.state.user.id);
         return Positioned(
           bottom: 8,
           right: 8,
@@ -371,26 +519,25 @@ class _MessageListViewState extends State<MessageListView> {
                   color: Colors.black,
                 ),
                 onPressed: () {
-              setState(() {
+                  if (unreadCount > 0) {
-                _showScrollToBottom = false;
+                    streamChannel.channel.markRead();
-              });
+                  }
+                  if (!_upToDate) {
+                    _bottomPaginationActive = false;
+                    _topPaginationActive = false;
+                    streamChannel.reloadChannel();
+                  } else {
+                    setState(() => _showScrollToBottom = false);
                     _scrollController.scrollTo(
                       index: 0,
                       duration: Duration(seconds: 1),
                       curve: Curves.easeInOut,
                     );
+                  }
                 },
               ),
-          if (streamChannel.channel.state.members.any((Member e) =>
+              if (showUnreadCount)
-              e.userId == streamChannel.channel.client.state.user.id))
+                Positioned(
-            StreamBuilder<int>(
-                stream: streamChannel.channel.state.unreadCountStream,
-                initialData: streamChannel.channel.state.unreadCount,
-                builder: (context, snapshot) {
-                  if (!snapshot.hasData || snapshot.data <= 0) {
-                    return Offstage();
-                  }
-                  return Positioned(
                   width: 20,
                   height: 20,
                   left: 10,
@@ -399,7 +546,7 @@ class _MessageListViewState extends State<MessageListView> {
                     child: Padding(
                       padding: const EdgeInsets.all(3.0),
                       child: Text(
-                          snapshot.data.toString(),
+                        '$unreadCount',
                         style: TextStyle(
                           fontSize: 11,
                           fontWeight: FontWeight.bold,
@@ -407,20 +554,24 @@ class _MessageListViewState extends State<MessageListView> {
                       ),
                     ),
                   ),
-                  );
+                ),
-                }),
             ],
           ),
         );
+      },
+    );
   }
 
-  Container _buildLoadingIndicator(StreamChannelState streamChannel) {
+  Widget _buildLoadingIndicator(
-    return Container(
+    StreamChannelState streamChannel,
+    QueryDirection direction,
+  ) {
+    final stream = direction == QueryDirection.top
+        ? streamChannel.queryTopMessages
+        : streamChannel.queryBottomMessages;
+    return StreamBuilder<bool>(
         key: Key('LOADING-INDICATOR'),
-      height: 50,
+        stream: stream,
-      width: double.infinity,
-      child: StreamBuilder<bool>(
-          stream: streamChannel.queryMessage,
         initialData: false,
         builder: (context, snapshot) {
           if (snapshot.hasError) {
@@ -432,16 +583,21 @@ class _MessageListViewState extends State<MessageListView> {
             );
           }
           if (!snapshot.data) {
-              return SizedBox();
+            if (direction == QueryDirection.top) {
+              return Container(
+                height: 50,
+                width: double.infinity,
+              );
+            }
+            return Offstage();
           }
           return Center(
             child: Padding(
               padding: const EdgeInsets.all(8.0),
-                child: CircularProgressIndicator(),
+              child: const CircularProgressIndicator(),
             ),
           );
-          }),
+        });
-    );
   }
 
   Widget _buildTopMessage(
@@ -468,22 +624,7 @@ class _MessageListViewState extends State<MessageListView> {
     } else {
       messageWidget = buildMessage(message, messages, messages.length - 1);
     }
-
+    return messageWidget;
-    return VisibilityDetector(
-      key: ValueKey<String>('TOP-MESSAGE'),
-      child: messageWidget,
-      onVisibilityChanged: (visibility) {
-        final topIsVisible = visibility.visibleBounds != Rect.zero;
-        if (topIsVisible && !_topWasVisible) {
-          if (widget.parentMessage == null) {
-            streamChannel.queryMessages();
-          } else {
-            streamChannel.getReplies(widget.parentMessage.id);
-          }
-        }
-        _topWasVisible = topIsVisible;
-      },
-    );
   }
 
   Widget _buildBottomMessage(
@@ -515,18 +656,17 @@ class _MessageListViewState extends State<MessageListView> {
       key: ValueKey<String>('BOTTOM-MESSAGE'),
       onVisibilityChanged: (visibility) {
         final isVisible = visibility.visibleBounds != Rect.zero;
-        if (isVisible &&
+        if (isVisible && !_bottomWasVisible) {
-            !_bottomWasVisible &&
+          final channel = streamChannel.channel;
-            streamChannel.channel.config?.readEvents == true) {
+          if (_upToDate &&
-          if (streamChannel.channel.state.unreadCount > 0) {
+              channel.config?.readEvents == true &&
+              channel.state.unreadCount > 0) {
             streamChannel.channel.markRead();
           }
+          _bottomWasVisible = !isVisible;
         }
-        _bottomWasVisible = isVisible;
         if (mounted) {
-          setState(() {
+          setState(() => _showScrollToBottom = !isVisible);
-            _showScrollToBottom = !isVisible;
-          });
         }
       },
       child: messageWidget,
@@ -582,7 +722,7 @@ class _MessageListViewState extends State<MessageListView> {
     final userId = StreamChat.of(context).user.id;
     final isMyMessage = message.user.id == userId;
     final isNextUser =
-        index - 1 >= 0 && message.user.id == messages[index - 1]?.user?.id;
+        index - 2 >= 0 && message.user.id == messages[index - 2]?.user?.id;
 
     final channel = StreamChannel.of(context).channel;
     final readList = channel.state?.read
@@ -597,7 +737,7 @@ class _MessageListViewState extends State<MessageListView> {
 
     final allRead = readList.length >= (channel.memberCount ?? 0) - 1;
 
-    return MessageWidget(
+    Widget child = MessageWidget(
       key: ValueKey<String>('MESSAGE-${message.id}'),
       message: message,
       reverse: isMyMessage,
@@ -605,7 +745,8 @@ class _MessageListViewState extends State<MessageListView> {
       padding: EdgeInsets.only(
         left: 8.0,
         right: 8.0,
-        bottom: index == 0 ? 30 : (isNextUser ? 5 : 10),
+        bottom: index == 0 ? 30 : (isNextUser ? 2 : 7),
+        top: 3,
       ),
       showUsername: !isMyMessage && !isNextUser,
       showSendingIndicator: isMyMessage &&
@@ -639,6 +780,30 @@ class _MessageListViewState extends State<MessageListView> {
       readList: readList,
       allRead: allRead,
     );
+
+    if (!initialMessageHighlightComplete &&
+        widget.highlightInitialMessage &&
+        _isInitialMessage(message.id)) {
+      final accentColor = Theme.of(context).accentColor;
+      child = TweenAnimationBuilder<Color>(
+        tween: ColorTween(
+          begin: accentColor.withOpacity(0.7),
+          end: Colors.transparent,
+        ),
+        duration: const Duration(seconds: 2),
+        child: child,
+        onEnd: () {
+          initialMessageHighlightComplete = true;
+        },
+        builder: (_, color, child) {
+          return Container(
+            color: color,
+            child: child,
+          );
+        },
+      );
+    }
+    return child;
   }
 
   StreamSubscription _messageNewListener;
@@ -651,26 +816,21 @@ class _MessageListViewState extends State<MessageListView> {
 
     final streamChannel = StreamChannel.of(context);
 
+    initialIndex = _initialIndex;
+    initialAlignment = _initialAlignment;
+
     _messageNewListener =
         streamChannel.channel.on(EventType.messageNew).listen((event) {
-      final firstElementInViewport =
+      if (_upToDate) {
-          _itemPositionListener.itemPositions.value.first;
+        _bottomPaginationActive = false;
+        _topPaginationActive = false;
+      }
       if (event.message.user.id == streamChannel.channel.client.state.user.id) {
         WidgetsBinding.instance.addPostFrameCallback((_) {
           _scrollController.jumpTo(
             index: 0,
           );
         });
-      } else {
-        if (firstElementInViewport.index != 0) {
-          _scrollController.jumpTo(
-            index: firstElementInViewport.index + 1,
-            alignment: firstElementInViewport.itemLeadingEdge,
-          );
-        }
-      }
-      if (firstElementInViewport.index == 0) {
-        streamChannel.channel.markRead();
       }
     });
 

lib/src/message_search_item.dart

@@ -77,16 +77,16 @@ class MessageSearchItem extends StatelessWidget {
   }
 
   Widget _buildDate(BuildContext context, Message message) {
-    final lastUpdatedAt = message.updatedAt;
+    final createdAt = message.createdAt;
     String stringDate;
     final now = DateTime.now();
 
-    if (now.year != lastUpdatedAt.year ||
+    if (now.year != createdAt.year ||
-        now.month != lastUpdatedAt.month ||
+        now.month != createdAt.month ||
-        now.day != lastUpdatedAt.day) {
+        now.day != createdAt.day) {
-      stringDate = Jiffy(lastUpdatedAt.toLocal()).format('dd/MM/yyyy');
+      stringDate = Jiffy(createdAt.toLocal()).format('dd/MM/yyyy');
     } else {
-      stringDate = Jiffy(lastUpdatedAt.toLocal()).format('HH:mm');
+      stringDate = Jiffy(createdAt.toLocal()).format('HH:mm');
     }
 
     return Text(

lib/src/message_search_list_view.dart

@@ -14,6 +14,10 @@ typedef MessageSearchItemTapCallback = void Function(GetMessageResponse);
 typedef MessageSearchItemBuilder = Widget Function(
     BuildContext, GetMessageResponse);
 
+/// Builder used when [MessageSearchListView] is empty
+typedef EmptyMessageSearchBuilder = Widget Function(
+    BuildContext context, String searchQuery);
+
 ///
 /// It shows the list of searched messages.
 ///
@@ -85,7 +89,7 @@ class MessageSearchListView extends StatefulWidget {
   final MessageSearchItemTapCallback onItemTap;
 
   /// The builder used when the channel list is empty.
-  final WidgetBuilder emptyBuilder;
+  final EmptyMessageSearchBuilder emptyBuilder;
 
   /// The builder that will be used in case of error
   final Widget Function(Error error) errorBuilder;
@@ -250,11 +254,10 @@ class _MessageSearchListViewState extends State<MessageSearchListView> {
 
         final items = snapshot.data;
 
-        if (items.isEmpty && widget.emptyBuilder != null) {
+        if (items.isEmpty) {
-          return widget.emptyBuilder(context);
+          if (widget.emptyBuilder != null) {
+            return widget.emptyBuilder(context, widget.messageQuery);
           }
-
-        if (items.isEmpty && widget.emptyBuilder == null) {
           return LayoutBuilder(
             builder: (context, viewportConstraints) {
               return SingleChildScrollView(

lib/src/stream_channel.dart

@@ -4,23 +4,29 @@ import 'package:flutter/material.dart';
 import 'package:rxdart/rxdart.dart';
 import 'package:stream_chat/stream_chat.dart';
 
+enum QueryDirection { top, bottom }
+
 /// Widget used to provide information about the channel to the widget tree
 ///
 /// Use [StreamChannel.of] to get the current [StreamChannelState] instance.
 class StreamChannel extends StatefulWidget {
-  StreamChannel({
+  const StreamChannel({
     Key key,
     @required this.child,
     @required this.channel,
     this.showLoading = true,
-  }) : super(
+    this.initialMessageId,
-          key: key,
+  })  : assert(child != null),
-        );
+        assert(channel != null),
+        super(key: key);
 
   final Widget child;
   final Channel channel;
   final bool showLoading;
 
+  /// If passed the channel will load from this particular message.
+  final String initialMessageId;
+
   /// Use this method to get the current [StreamChannelState] instance
   static StreamChannelState of(BuildContext context) {
     StreamChannelState streamChannelState;
@@ -43,87 +49,123 @@ class StreamChannelState extends State<StreamChannel> {
   /// Current channel
   Channel get channel => widget.channel;
 
+  /// InitialMessageId
+  String get initialMessageId => widget.initialMessageId;
+
   /// Current channel state stream
   Stream<ChannelState> get channelStateStream =>
       widget.channel.state.channelStateStream;
 
-  final BehaviorSubject<bool> _queryMessageController = BehaviorSubject();
+  final _queryTopMessagesController = BehaviorSubject.seeded(false);
+  final _queryBottomMessagesController = BehaviorSubject.seeded(false);
 
-  /// The stream notifying the state of queryMessage call
+  /// The stream notifying the state of [_queryTopMessages] call
-  Stream<bool> get queryMessage => _queryMessageController.stream;
+  Stream<bool> get queryTopMessages => _queryTopMessagesController.stream;
 
-  bool _paginationEnded = false;
+  /// The stream notifying the state of [_queryBottomMessages] call
+  Stream<bool> get queryBottomMessages => _queryBottomMessagesController.stream;
 
-  /// Calls [channel.query] updating [queryMessage] stream
+  bool _topPaginationEnded = false;
-  void queryMessages() {
+  bool _bottomPaginationEnded = false;
-    if (_queryMessageController.value == true || _paginationEnded) {
+
+  Future<void> _queryTopMessages({
+    int limit = 20,
+    bool preferOffline = false,
+  }) async {
+    if (_topPaginationEnded || _queryTopMessagesController?.value == true) {
       return;
     }
+    _queryTopMessagesController.add(true);
 
-    _queryMessageController.add(true);
+    if (channel.state.messages.isEmpty) {
-
+      return _queryTopMessagesController.add(false);
-    String firstId;
-    if (channel.state.messages.isNotEmpty) {
-      firstId = channel.state.messages.first.id;
     }
 
-    final messageLimit = 50;
+    final oldestMessage = channel.state.messages.first;
 
-    widget.channel
+    try {
-        .query(
+      final state = await queryBeforeMessage(
-      messagesPagination: PaginationParams(
+        oldestMessage.id,
-        lessThan: firstId,
+        limit: limit,
-        limit: messageLimit,
+        preferOffline: preferOffline,
-      ),
+      );
-      preferOffline: true,
+      if (state.messages.isEmpty || state.messages.length < limit) {
-    )
+        _topPaginationEnded = true;
-        .then((res) {
-      if (res.messages.isEmpty || res.messages.length < messageLimit) {
-        _paginationEnded = true;
       }
-      _queryMessageController.add(false);
+      _queryTopMessagesController.add(false);
-    }).catchError((e, stack) {
+    } catch (e, stk) {
-      if (!_queryMessageController.isClosed) {
+      _queryTopMessagesController.addError(e, stk);
-        _queryMessageController.addError(e, stack);
     }
-    });
+  }
+
+  Future<void> _queryBottomMessages({
+    int limit = 20,
+    bool preferOffline = false,
+  }) async {
+    if (_bottomPaginationEnded ||
+        _queryBottomMessagesController?.value == true ||
+        channel?.state?.isUpToDate == true) return;
+    _queryBottomMessagesController.add(true);
+
+    if (channel.state.messages.isEmpty) {
+      return _queryBottomMessagesController.add(false);
+    }
+
+    final recentMessage = channel.state.messages.last;
+
+    try {
+      final state = await queryAfterMessage(
+        recentMessage.id,
+        limit: limit,
+        preferOffline: preferOffline,
+      );
+      if (state.messages.isEmpty || state.messages.length < limit) {
+        _bottomPaginationEnded = true;
+      }
+      _queryBottomMessagesController.add(false);
+    } catch (e, stk) {
+      _queryBottomMessagesController.addError(e, stk);
+    }
+  }
+
+  /// Calls [channel.query] updating [queryMessage] stream
+  Future<void> queryMessages({QueryDirection direction = QueryDirection.top}) {
+    if (direction == QueryDirection.top) return _queryTopMessages();
+    return _queryBottomMessages();
   }
 
   /// Calls [channel.getReplies] updating [queryMessage] stream
-  Future<void> getReplies(String parentId) async {
+  Future<void> getReplies(
-    if (_queryMessageController.value == true || _paginationEnded) {
+    String parentId, {
-      return;
+    int limit = 50,
+    bool preferOffline = false,
+  }) async {
+    if (_topPaginationEnded || _queryTopMessagesController.value) return;
+    _queryTopMessagesController.add(true);
+
+    if (!channel.state.threads.containsKey(parentId)) {
+      return _queryTopMessagesController.add(false);
     }
 
-    _queryMessageController.add(true);
+    final thread = channel.state.threads[parentId];
 
-    String firstId;
+    if (thread.isEmpty) return _queryTopMessagesController.add(false);
-    if (widget.channel.state.threads.containsKey(parentId)) {
-      final thread = widget.channel.state.threads[parentId];
 
-      if (thread != null && thread.isNotEmpty) {
+    final message = thread.first;
-        firstId = thread?.first?.id;
-      }
-    }
 
-    final messageLimit = 50;
+    try {
-    return widget.channel
+      final state = await queryBeforeMessage(
-        .getReplies(
+        message.id,
-      parentId,
+        limit: limit,
-      PaginationParams(
+        preferOffline: preferOffline,
-        lessThan: firstId,
+      );
-        limit: messageLimit,
+      if (state.messages.isEmpty || state.messages.length < limit) {
-      ),
+        _topPaginationEnded = true;
-      preferOffline: true,
+      }
-    )
+      _queryTopMessagesController.add(false);
-        .then((res) {
+    } catch (e, stk) {
-      if (res.messages.isEmpty || res.messages.length < messageLimit) {
+      _queryTopMessagesController.addError(e, stk);
-        _paginationEnded = true;
     }
-      _queryMessageController.add(false);
-    }).catchError((e, stack) {
-      _queryMessageController.addError(e, stack);
-    });
   }
 
   /// Query the channel members and watchers
@@ -140,41 +182,161 @@ class StreamChannelState extends State<StreamChannel> {
     );
   }
 
+  /// Loads channel at specific message
+  Future<void> loadChannelAtMessage(
+    String messageId, {
+    int before = 20,
+    int after = 20,
+    bool preferOffline = false,
+  }) {
+    return queryAtMessage(
+      messageId: messageId,
+      before: before,
+      after: after,
+      preferOffline: preferOffline,
+    );
+  }
+
+  ///
+  Future<void> queryAtMessage({
+    String messageId,
+    int before = 20,
+    int after = 20,
+    bool preferOffline = false,
+  }) async {
+    if (channel.state == null) return;
+    channel.state.isUpToDate = false;
+    channel.state.truncate();
+
+    if (messageId == null) {
+      await channel.query(
+        messagesPagination: PaginationParams(
+          limit: before,
+        ),
+        preferOffline: preferOffline,
+      );
+      channel.state.isUpToDate = true;
+      return;
+    }
+
+    return Future.wait([
+      queryBeforeMessage(
+        messageId,
+        limit: before,
+        preferOffline: preferOffline,
+      ),
+      queryAfterMessage(
+        messageId,
+        limit: after,
+        preferOffline: preferOffline,
+      ),
+    ]);
+  }
+
+  ///
+  Future<ChannelState> queryBeforeMessage(
+    String messageId, {
+    int limit = 20,
+    bool preferOffline = false,
+  }) {
+    return channel.query(
+      messagesPagination: PaginationParams(
+        lessThan: messageId,
+        limit: limit,
+      ),
+      preferOffline: preferOffline,
+    );
+  }
+
+  ///
+  Future<ChannelState> queryAfterMessage(
+    String messageId, {
+    int limit = 20,
+    bool preferOffline = false,
+  }) async {
+    final state = await channel.query(
+      messagesPagination: PaginationParams(
+        greaterThanOrEqual: messageId,
+        limit: limit,
+      ),
+      preferOffline: preferOffline,
+    );
+    if (state.messages.isEmpty || state.messages.length < limit) {
+      channel.state.isUpToDate = true;
+    }
+    return state;
+  }
+
+  /// Reloads the channel with latest message
+  Future<void> reloadChannel() => queryAtMessage(before: 30);
+
+  List<Future<bool>> _futures;
+
+  Future<bool> get _loadChannelAtMessage async {
+    try {
+      await loadChannelAtMessage(initialMessageId);
+      return true;
+    } catch (e, stk) {
+      print('Error: $e\nStack: $stk');
+      rethrow;
+    }
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    _futures = [widget.channel.initialized];
+    if (initialMessageId != null) {
+      _futures.add(_loadChannelAtMessage);
+    }
+  }
+
   @override
   void dispose() {
-    _queryMessageController.close();
+    _queryTopMessagesController.close();
+    _queryBottomMessagesController.close();
     super.dispose();
   }
 
   @override
   Widget build(BuildContext context) {
-    if (widget.channel == null) {
+    Widget child = FutureBuilder<List<bool>>(
+      future: Future.wait(_futures),
+      initialData: [
+        channel.state != null,
+        if (initialMessageId != null) false,
+      ],
+      builder: (context, snapshot) {
+        if (snapshot.hasError) {
+          if (snapshot.error is Error) {
+            print((snapshot.error as Error).stackTrace);
+          }
+          var message = snapshot.error.toString();
+          if (snapshot.error is DioError) {
+            final dioError = snapshot.error as DioError;
+            if (dioError.type == DioErrorType.RESPONSE) {
+              message = dioError.message;
+            } else {
+              message = 'Check your connection and retry';
+            }
+          }
+          return Center(
+            child: Text(message),
+          );
+        }
+        final initialized = snapshot.data[0];
+        final dataLoaded = initialMessageId == null ? true : snapshot.data[1];
+        if (widget.showLoading && (!initialized || !dataLoaded)) {
           return Center(
             child: CircularProgressIndicator(),
           );
         }
-    return FutureBuilder<bool>(
-      future: widget.channel.initialized,
-      initialData: widget.channel.state != null,
-      builder: (context, snapshot) {
-        if (widget.showLoading && (!snapshot.hasData || !snapshot.data)) {
-          return Container(
-            height: 30,
-            child: Center(
-              child: CircularProgressIndicator(),
-            ),
-          );
-        } else if (snapshot.hasError) {
-          return Container(
-            height: 30,
-            child: Center(
-              child: Text(snapshot.error),
-            ),
-          );
-        } else {
         return widget.child;
-        }
       },
     );
+    if (initialMessageId != null) {
+      child = Material(child: child);
+    }
+    return child;
   }
 }

lib/src/user_item.dart

@@ -90,6 +90,8 @@ class UserItem extends StatelessWidget {
   }
 
   Widget _buildLastActive(context) {
-    return Text('Last online ${Jiffy(user.lastActive).fromNow()}');
+    return user.online == true
+        ? Text('Online')
+        : Text('Last online ${Jiffy(user.lastActive).fromNow()}');
   }
 }

lib/src/user_list_view.dart

@@ -190,7 +190,7 @@ class _UserListViewState extends State<UserListView>
           }
           final groupedUsers = <String, List<User>>{};
           for (var e in temp) {
-            final alphabet = e.name[0];
+            final alphabet = e.name[0]?.toUpperCase();
             groupedUsers[alphabet] = [...groupedUsers[alphabet] ?? [], e];
           }
           final items = <ListItem>[];
@@ -339,7 +339,9 @@ class _UserListViewState extends State<UserListView>
               );
 
         return LazyLoadScrollView(
-          onEndOfPage: () => _listenUserPagination(usersBlocState),
+          onEndOfPage: () async {
+            return _listenUserPagination(usersBlocState);
+          },
           child: child,
         );
       },

pubspec.yaml

@@ -28,7 +28,7 @@ dependencies:
   file_picker: ^2.0.12
   image_picker: ^0.6.7+2
   flutter_keyboard_visibility: ^3.3.0
-  stream_chat: ^0.2.19
+  stream_chat: ^0.2.20
   mime: ^0.9.6+3
   video_compress: ^2.1.1
   visibility_detector: ^0.1.5