Pagination in Flutter with Firebase Realtime Database

Question

I am trying to paginate in Flutter with firebase realtime databse. I have tried this in Firestore and it works fine there but I want this with realtime database.

I am fetching data for the first time like this.

 Widget buildListMessage() {
    return Flexible(
      child: StreamBuilder(
        stream: _firebase.firebaseDB
            .reference()
            .child("chats")
            .child("nsbcalculator")
            .orderByChild('timestamp')
            .limitToFirst(15)
            .onValue,
        builder: (context, AsyncSnapshot<Event> snapshot) {
          if (!snapshot.hasData) {
            return Center(
                child: CircularProgressIndicator(
                    valueColor: AlwaysStoppedAnimation<Color>(themeColor)));
          } else {

            if (snapshot.data.snapshot.value != null) {

                listMessage = Map.from(snapshot.data.snapshot.value)
                    .values
                    .toList()
                      ..sort(
                          (a, b) => a['timestamp'].compareTo(b['timestamp']));

              if (lastVisible == null) {
                lastVisible = listMessage.last;
                listMessage.removeLast();
              }
            }

            return ListView.builder(
              ...
            );
          }
        },
      ),
    );
  }

After that to paginate I am using a listener with ScrollController

  void _scrollListener() async {
    if (listScrollController.position.pixels ==
        listScrollController.position.maxScrollExtent) {
      _fetchMore();
    }
  }

and finally

  _fetchMore() {
    _firebase.firebaseDB
        .reference()
        .child("chats")
        .child("nsbcalculator")
        .orderByChild('timestamp')
        .startAt(lastVisible['timestamp'])
        .limitToFirst(5)
        .once()
        .then((snapshot) {

      List snapList = Map.from(snapshot.value).values.toList()
        ..sort((a, b) => a['timestamp'].compareTo(b['timestamp']));


      if (snapList.isNotEmpty) {
        print(snapList.length.toString());

        if (!noMore) {

          listMessage.removeLast();

          //Problem is here.....??
          setState(() {
            listMessage..addAll(snapList);
          });

          lastVisible = snapList.last;

          print(lastVisible['content']);
        }

        if (snapList.length < 5) {
          noMore = true;
        }
      }
    });
  }

Its working fine as realtime communication but when I try to paginate in _fetchMore() setState is called but it refreshes the state of whole widget and restarts the StreamBuilder again and all data is replaced by only new query. How can I prevent this??

Are you able to get it resolved? – Shajeel Afzal Jul 21 '20 at 16:57 — Shajeel Afzal, Jul 21 '20 at 16:57

score 5 · Answer 1 · edited Mar 22 '19 at 13:21

5

Calling setState will redraw your whole widget and your list view. Now, since you supplying the steam that provides the first page, after redraw it just loads it. To avoid that you could use your own stream and supply new content to it. Then your StreamBuilder will handle the update automatically.

You need to store the full list of your items as a separate variable, update it and then sink to your stream.

final _list = List<Event>();
final _listController = StreamController<List<Event>>.broadcast();
Stream<List<Event>> get listStream => _listController.stream;

@override
void initState() {
  super.initState();
  // Here you need to load your first page and then add to your stream
  ...
  _list.addAll(firstPageItems);
  _listController.sink.add(_list);
}

@override
void dispose() {
  super.dispose();
}

Widget buildListMessage() {
    return Flexible(
      child: StreamBuilder(
        stream: listStream
        ...
}

_fetchMore() {
  ...
  // Do your fetch and then just add items to the stream
  _list.addAll(snapList);
  _listController.sink.add(_list);
  ...
}

edited Mar 22 '19 at 13:21

Jawand Singh

1,929
1
24
21

answered Jan 31 '19 at 16:58

Oleksii Kalentiev

286
3
9

What would be _pushController here?? – Shahzad Akram Jan 31 '19 at 17:17
Sorry, my bad, its _listController. – Oleksii Kalentiev Jan 31 '19 at 22:57
Ok bro but I am unable to solve it.. event is not an iterable.. we cant join it with _list.adAll (event)... _list.add (event) also not working... sorry but I haven't any experience of custom stream, so please explain more.. – Shahzad Akram Feb 01 '19 at 07:20
Add to the _list your snapList after you parse it from the response of Firebase Database. I see that you have listMessage variable, maybe you can use it instead of _list. – Oleksii Kalentiev Feb 01 '19 at 10:44

score 4 · Answer 2 · answered May 01 '20 at 13:18

Try this one
pagination for RealTime list

class FireStoreRepository {
  final CollectionReference _chatCollectionReference =
      Firestore.instance.collection('Chat');

  final StreamController<List<ChatModel>> _chatController =
      StreamController<List<ChatModel>>.broadcast();

  List<List<ChatModel>> _allPagedResults = List<List<ChatModel>>();

  static const int chatLimit = 10;
  DocumentSnapshot _lastDocument;
  bool _hasMoreData = true;

  Stream listenToChatsRealTime() {
    _requestChats();
    return _chatController.stream;
  }

  void _requestChats() {
    var pagechatQuery = _chatCollectionReference
        .orderBy('timestamp', descending: true)
        .limit(chatLimit);

    if (_lastDocument != null) {
      pagechatQuery =
          pagechatQuery.startAfterDocument(_lastDocument);
    }

    if (!_hasMoreData) return;

    var currentRequestIndex = _allPagedResults.length;

    pagechatQuery.snapshots().listen(
      (snapshot) {
        if (snapshot.documents.isNotEmpty) {
          var generalChats = snapshot.documents
              .map((snapshot) => ChatModel.fromMap(snapshot.data))
              .toList();

          var pageExists = currentRequestIndex < _allPagedResults.length;

          if (pageExists) {
            _allPagedResults[currentRequestIndex] = generalChats;
          } else {
            _allPagedResults.add(generalChats);
          }

          var allChats = _allPagedResults.fold<List<ChatModel>>(
              List<ChatModel>(),
              (initialValue, pageItems) => initialValue..addAll(pageItems));

          _chatController.add(allChats);

          if (currentRequestIndex == _allPagedResults.length - 1) {
            _lastDocument = snapshot.documents.last;
          }

          _hasMoreData = generalChats.length == chatLimit;
        }
      },
    );
  }

  void requestMoreData() => _requestChats();
}

ChatListView

class ChatView extends StatefulWidget {
  ChatView({Key key}) : super(key: key);

  @override
  _ChatViewState createState() => _ChatViewState();
}

class _ChatViewState extends State<ChatView> {

FireStoreRepository _fireStoreRepository;
final ScrollController _listScrollController = new ScrollController();

@override
  void initState() {
    super.initState();
    _fireStoreRepository = FireStoreRepository();
    _listScrollController.addListener(_scrollListener);
  }

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Flexible(
        child: StreamBuilder<List<ChatModel>>(
          stream: _fireStoreRepository.listenToChatsRealTime(),
          builder: (context, snapshot) {
             return ListView.builder(
              itemCount: snapshot.data.length,
              controller: _listScrollController,
              shrinkWrap: true,
              reverse: true,
              itemBuilder: (context, index) {
                ...
              }
            );
          }
        )
      ),
    );
  }

  void _scrollListener() {
    if (_listScrollController.offset >=
            _listScrollController.position.maxScrollExtent &&
        !_listScrollController.position.outOfRange) {
      _fireStoreRepository.requestMoreData();
    }
  }

}

ChatModel Class

class ChatModel {
  final String userID;
  final String message;
  final DateTime timeStamp;

  ChatModel({this.userID, this.message, this.timeStamp});

  //send 
  Map<String, dynamic> toMap() {
    return {
      'userid': userID,
      'message': message,
      'timestamp': timeStamp,
    };
  }

  //fetch
  static ChatModel fromMap(Map<String, dynamic> map) {
    if (map == null) return null;

    return ChatModel(
      userID: map['userid'],
      message: map['message'],
      timeStamp: DateTime.fromMicrosecondsSinceEpoch(map['timestamp'] * 1000),
    );
  }
}

The question is asked about Firebase Realtime Database but you are talking about Firestore. — Shajeel Afzal, Jul 21 '20 at 16:55
Thank you so much @Tejas Patel. You saved my time for relatime msg with pagination — Riddhi Shankar, Feb 10 '21 at 07:48

Pagination in Flutter with Firebase Realtime Database

2 Answers2

Linked