Flutter Firebase Pagination with Gridview builder

I am making e-commerce app and i have number of documents in my firebase storage, i want to get in bunch of 10-10 data on scroll, if user reach at last documents then again i want to get 10 more data for user.

Following are my code for fetching data from firebase:

 static allProduct(){
    return firestore.collection(productsCollection).snapshots();
  }

Following code for showing fetch data, i have column with other widgets but at the end of page i am showing all product list and its working fine but want to do pagination.

20.heightBox,
              Align(alignment: Alignment.topLeft,
                  child: "All Products".text.size(18).fontFamily(bold).color(
                      darkFontGrey).make()),
              10.heightBox,
              StreamBuilder(
                  stream: FireStoreServices.allProduct(),
                  builder: (BuildContext context,
                      AsyncSnapshot<QuerySnapshot> snapshot) {
                    if (!snapshot.hasData) {
                      return Center(
                        child: CircularProgressIndicator(),
                      );
                    } else {
                      var allProductData = snapshot.data!.docs;


                      return GridView.builder(
                        physics: NeverScrollableScrollPhysics(),
                        shrinkWrap: true,
                        itemCount: allProductData.length,
                        gridDelegate:
                        SliverGridDelegateWithFixedCrossAxisCount(
                            crossAxisCount: 2,
                            mainAxisSpacing: 8,
                            crossAxisSpacing: 8,
                            mainAxisExtent: 200),
                        itemBuilder: (context, index) {
                          return Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Image.network(
                                allProductData[index]['p_images'][0],
                                width: 170,
                                height: 100,
                                fit: BoxFit.fitHeight,
                              ),
                              //Spacer(),
                              10.heightBox,
                              "${allProductData[index]['p_name']}"
                                  .text
                                  .fontFamily(semibold)
                                  .color(darkFontGrey)
                                  .make(),
                              Spacer(),
                              "${allProductData[index]['p_price']}"
                                  .numCurrency.text
                                  .fontFamily(bold)
                                  .color(redColor)
                                  .size(16)
                                  .make(),
                              Spacer(),
                              allProductData[index]['p_discount'] != "0" ?
                              "Discount/Qty: ${allProductData[index]['p_discount']} rs"
                                  .text
                                  .fontFamily(semibold)
                                  .color(darkFontGrey)
                                  .make() : Container(),
                            ],
                          )
                              .box
                              .roundedSM
                          //.margin(EdgeInsets.symmetric(horizontal: 4))
                              .white
                              .padding(EdgeInsets.all(12))
                              .make()
                              .onTap(() {
                            Get.to(() =>
                                ItemDetails(
                                    title:
                                    "${allProductData[index]['p_name']}",
                                    data: allProductData[index]));
                          });
                        },
                      );


                    }
                  }),

Leave a Comment