Create infinite scrolling pagination in flutter with FirebaseAnimatedList

Question

When using FirebaseAnimatedList to render a list of message widgets in flutter, how would I implement an infinite scrolling mechanism that would load 10 new messages as the user scrolled up? This is the code for the FirebaseAnimatedList and below are some methods I've tried using

    FirebaseAnimatedList(
      shrinkWrap: true,
      physics: const BouncingScrollPhysics(),
      controller: _scrollController,
      query: FirebaseDatabase.instance
          .ref("messages/${widget.placeID}/")
          .orderByChild("timeStamp"),
      itemBuilder: (context, snapshot, animation, index) {
        final json = snapshot.value as Map<dynamic, dynamic>;
        final message = Message.fromJson(json);
        return MessageWidget(
          message: message.text,
          id: message.uid,
          name: message.name,
          lastSender: message.lastSender,
          date: message.timeStamp,
        );
      },
    );
  }

Code in initState:

  int scrollValue = 20;
  var messagesQuery;
  final ScrollController _scrollController = ScrollController();

  @override
  void initState() {
    setState(() {
      _scrollController.hasClients == true;
      messagesQuery = FirebaseDatabase.instance
          .ref("messages/ChIJu9mKv73Bt4kRu9BSvbTPfDU/")
          .orderByChild("timeStamp")
          .limitToLast(scrollValue);
    });
    _tabController = TabController(length: 3, vsync: this);
    _scrollController.addListener(() {
      if (_scrollController.position.atEdge) {
        bool isTop = _scrollController.position.pixels == 0;
        if (isTop) {
          setState(() {
            scrollValue = 20;
            messagesQuery = FirebaseDatabase.instance
                .ref("messages/ChIJu9mKv73Bt4kRu9BSvbTPfDU/")
                .orderByChild("timeStamp")
                .limitToLast(scrollValue + 10);
          });
        } else {
          print('At the bottom');
        }
      }
    });
    super.initState();
  }

The code above doesn't add 20 more messages, nothing happens. I know it detects when the list has been scrolled to the top since it outputs the correct print message, but it doesn't updated the list to include more messages.

In your scroll controller listener you are only running a query to return the last 30 items total. What you would want to do is update the scroll value globally because it's running the same query over and over. What happens if you do something like scrollvalue += 20? — Alexander N., Oct 23 '22 at 03:02
Nothing happens when I make scrollcontainer += 20. I think the issue is that updating the query might not update the results until next load — Mohammad Abd-Elmoniem, Oct 23 '22 at 03:17
Mmoniem, please let me know if the recommendation below was helpful. — Vaidehi Jamankar, Oct 31 '22 at 03:54
It was helpful but even after viewing the links I wasn't able to create the end product, it didn't answer my question — Mohammad Abd-Elmoniem, Oct 31 '22 at 12:55

score 1 · Answer 1 · answered Oct 26 '22 at 06:35

The basic idea behind implementing infinite scroll working can be summarized in general to have two separate queries:
(1) Query for the first batch (without the startAfter)
(2) Query for loading more content (exact same query, but with startAfter())

You can actually review this quick guide for infinite scrolling with Firebase. There is a useful document for Infinite Scroll Pagination.

Similar questions in Stackoverflow:
[3]:How to implement Infinite Scrolling with the new Firebase (2016)?
[4]:Firestore limit using react-infinite-scroll-component only scroll with the given limit
[5]:Firebase infinite scroll proper solution?
[6]:How would I paginate Firestore data with cloud functions?

Create infinite scrolling pagination in flutter with FirebaseAnimatedList

1 Answers1