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]));
});
},
);
}
}),