[MessageListView] : Use notification listener to implement pagination.

Signed-off-by: Sahil Kumar <[email protected]>

lib/src/lazy_load_scroll_view.dart

@@ -15,7 +15,7 @@ class LazyLoadScrollView extends StatefulWidget {
   final VoidCallback onEndOfPage;
 
   /// The offset to take into account when triggering [onEndOfPage] in pixels
-  final int scrollOffset;
+  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;

lib/src/message_list_view.dart

@@ -5,6 +5,7 @@ import 'package:flutter/material.dart';
 import 'package:jiffy/jiffy.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';
@@ -160,7 +161,6 @@ class MessageListView extends StatefulWidget {
 class _MessageListViewState extends State<MessageListView> {
   ItemScrollController _scrollController;
   bool _bottomWasVisible = false;
-  bool _topWasVisible = false;
   Function _onThreadTap;
   bool _showScrollToBottom = false;
   ItemPositionsListener _itemPositionListener;
@@ -223,7 +223,16 @@ class _MessageListViewState extends State<MessageListView> {
           return Stack(
             alignment: Alignment.center,
             children: [
-              ScrollablePositionedList.builder(
+              LazyLoadScrollView(
+                onStartOfPage: () => _paginateData(
+                  streamChannel,
+                  QueryDirection.bottom,
+                ),
+                onEndOfPage: () => _paginateData(
+                  streamChannel,
+                  QueryDirection.top,
+                ),
+                child: ScrollablePositionedList.builder(
                   itemPositionsListener: _itemPositionListener,
                   addAutomaticKeepAlives: true,
                   key: Key('messageListView'),
@@ -248,7 +257,8 @@ 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(
@@ -306,8 +316,8 @@ class _MessageListViewState extends State<MessageListView> {
                     }
 
                     if (nextMessage != null &&
-                      !Jiffy(message.createdAt.toLocal())
-                          .isSame(nextMessage.createdAt.toLocal(), Units.DAY)) {
+                        !Jiffy(message.createdAt.toLocal()).isSame(
+                            nextMessage.createdAt.toLocal(), Units.DAY)) {
                       return Column(
                         crossAxisAlignment: CrossAxisAlignment.stretch,
                         children: <Widget>[
@@ -328,6 +338,7 @@ class _MessageListViewState extends State<MessageListView> {
                     return messageWidget;
                   },
                 ),
+              ),
               if (widget.showScrollToBottom && _showScrollToBottom)
                 _buildScrollToBottom(),
               Positioned(
@@ -365,6 +376,14 @@ class _MessageListViewState extends State<MessageListView> {
         });
   }
 
+  void _paginateData(StreamChannelState channel, QueryDirection direction) {
+    if (widget.parentMessage == null) {
+      channel.queryMessages(direction: direction);
+    } else {
+      channel.getReplies(widget.parentMessage.id, direction: direction);
+    }
+  }
+
   ItemPosition _getTopElement(Iterable<ItemPosition> values) {
     return values
         .where((ItemPosition position) => position.itemLeadingEdge < 0.9)
@@ -485,22 +504,7 @@ class _MessageListViewState extends State<MessageListView> {
     } else {
       messageWidget = buildMessage(message, messages, messages.length - 1);
     }
-
-    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;
-        }
-      },
-    );
+    return messageWidget;
   }
 
   Widget _buildBottomMessage(
@@ -533,14 +537,6 @@ class _MessageListViewState extends State<MessageListView> {
       onVisibilityChanged: (visibility) {
         final isVisible = visibility.visibleBounds != Rect.zero;
         if (isVisible && !_bottomWasVisible) {
-          if (widget.parentMessage == null) {
-            streamChannel.queryMessages(direction: QueryDirection.bottom);
-          } else {
-            streamChannel.getReplies(
-              widget.parentMessage.id,
-              direction: QueryDirection.bottom,
-            );
-          }
           if (streamChannel.channel.config?.readEvents == true &&
               streamChannel.channel.state.unreadCount > 0) {
             streamChannel.channel.markRead();