title: Pagination in Flutter with Firebase Realtime Database
body: <p>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.</p>
  
  <p>I am fetching data for the first time like this.</p>
  
  <pre><code> Widget buildListMessage() {
      return Flexible(
        child: StreamBuilder(
          stream: _firebase.firebaseDB
              .reference()
              .child("chats")
              .child("nsbcalculator")
              .orderByChild('timestamp')
              .limitToFirst(15)
              .onValue,
          builder: (context, AsyncSnapshot&lt;Event&gt; snapshot) {
            if (!snapshot.hasData) {
              return Center(
                  child: CircularProgressIndicator(
                      valueColor: AlwaysStoppedAnimation&lt;Color&gt;(themeColor)));
            } else {
  
              if (snapshot.data.snapshot.value != null) {
  
                  listMessage = Map.from(snapshot.data.snapshot.value)
                      .values
                      .toList()
                        ..sort(
                            (a, b) =&gt; a['timestamp'].compareTo(b['timestamp']));
  
                if (lastVisible == null) {
                  lastVisible = listMessage.last;
                  listMessage.removeLast();
                }
              }
  
              return ListView.builder(
                ...
              );
            }
          },
        ),
      );
    }
  
  </code></pre>
  
  <p>After that to paginate I am using a listener with ScrollController</p>
  
  <pre><code>  void _scrollListener() async {
      if (listScrollController.position.pixels ==
          listScrollController.position.maxScrollExtent) {
        _fetchMore();
      }
    }
  
  </code></pre>
  
  <p>and finally</p>
  
  <pre><code>  _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) =&gt; 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 &lt; 5) {
            noMore = true;
          }
        }
      });
    }
  
  </code></pre>
  
  <p>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??</p>