Firestore Pagination in Flutter

Question

I have datamodel class to get data from firestore. There is method to convert json to map.

DataModel(
      {required this.title,
      required this.shortInfo,
      required this.thumbnailUrl,
      required this.longDescription,
      required this.id,
      required this.category,
      required this.categoryId});

  Map<String, dynamic> toMap() => {
        'title': title,
        'shortInfo': shortInfo,
        'thumbnailUrl': thumbnailUrl,
        'longDescription': longDescription,
        'id': id,
        'category': category,
        'categoryId': categoryId
      };

  DataModel.fromJson(Map<String, dynamic> json) {
    title = json['title'];
    shortInfo = json['shortInfo'];
    //publishedDate = json['publishedDate'];
    thumbnailUrl = json['thumbnailUrl'];
    longDescription = json['longDescription'];
    category = json['category'];
    categoryId = json['categoryId'];
    id = json['id'];
  }

Here is the method I use for streaming.

Stream<QuerySnapshot> getData(String collectionPath) {
    return _firestore
        .collection(collectionPath)
        .limit(10)
        .orderBy('id', descending: true)
        .snapshots();
  }

I'm showing data by streaming with Streambuilder. I want the data to increase as I scroll the page, how can I do that?

Here are my homepage codes.

body: Center(
          child: StreamBuilder<QuerySnapshot>(
            stream: dataBase.getData('posts'),
            builder: (BuildContext context,
                AsyncSnapshot<QuerySnapshot> dataSnapshot) {
              if (dataSnapshot.hasError) {
                print(dataSnapshot.error);
                return Center(child: Text(dataSnapshot.error.toString()));
              } else {
                if (!dataSnapshot.hasData) {
                  return ColorLoader(
                  );
                } else {
                  return ListView.builder(
                    itemCount: dataSnapshot.data!.docs.length,
                    itemBuilder: (context, index) {
                      DataModel model = DataModel.fromJson(
                          dataSnapshot.data!.docs[index].data()
                              as Map<String, dynamic>);
                      return sourceInfo(model, context);
                    },
                  );
                }
              }
            },
          ),
        ),

Answer 1

I will suggest to use LazyLoadScrollView this will help you to use load minimum number of documents from firestore:

eg:

LazyLoadScrollView(
      onEndOfPage: () => loadMore(),
      scrollOffset: 100 // Pixels from the bottom that should trigger a callback 
      isLoading: isLoadingvar // when you reach end of doc make it false.
      child: ListView.builder(
      itemCount: data.length,
      itemBuilder: (context, position) {
        return Text("Position $position");
      },
    ),
  ),