I need to implement Pagination in flutter as list of products is very high. I need to make paginate with 20 items show at once. I tried below plugin, but that solution is not working. I have pasted my code without pagination which works fine with only issue when product list is high, it slows down page load time. is there any other other solution for pagination in flutter. I am using Laravel as backend.
plugin used : https://pub.dev/packages/flutter_paginator api: https://androidapp.factory2homes.com/api/get-products-for-mobile-case/26
class ProductByPhoneModel extends StatefulWidget {
final phoneModel;
ProductByPhoneModel(this.phoneModel);
List<String> prod = new List();
@override
_ProductByPhoneModelState createState() => _ProductByPhoneModelState();
}
class _ProductByPhoneModelState extends State<ProductByPhoneModel> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('f2h'),
),
body: FutureBuilder<List<Product>>(
future: getProductByPhoneModel(http.Client(), this.widget.phoneModel),
builder: (context, snapshot) {
if (snapshot.hasError) print(snapshot.error);
return snapshot.hasData
? ProductByPhoneModelGrid(
product: snapshot.data,
)
: Center(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
CircularProgressIndicator(),
Container(
height: 15,
width: double.infinity,
),
Text('Factory2Homes'),
],
)),
);
},
),
);
}
}
class ProductByPhoneModelGrid extends StatelessWidget {
final List<Product> product;
ProductByPhoneModelGrid({this.product});
@override
Widget build(BuildContext context) {
return GridView.builder(
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 3 / 4,
),
itemCount: product.length,
scrollDirection: Axis.vertical,
itemBuilder: (context, index) {
return InkWell(
// onTap: () async {
// Navigator.pushNamed(context, '/ProductDetailLandingPage',arguments: product[index]);
// SharedPreferences prefs = await SharedPreferences.getInstance();
// createProductPageVisit(prefs.getInt('userId'), 'ProductByCategory', product[index].productId, prefs.getString('token'));
// },
child: Card(
child: Column(
children: <Widget>[
Container(
height: 150,
width: double.maxFinite,
child: Image.network(
product[index].productPhoto,
fit: BoxFit.fill,
)),
Center(
child: Text(product[index].productName, overflow: TextOverflow.ellipsis,
maxLines: 3,
style: TextStyle(
fontSize: 12,
)
),
),
Center(
child: RichText(
text: TextSpan(
style: DefaultTextStyle.of(context).style,
children: [
TextSpan(
text:
'\u20B9 ${product[index].productSalePrice}'),
TextSpan(
text:
' ${product[index].productListPrice}',
style: TextStyle(
fontSize: 12,
decoration: TextDecoration.lineThrough,
color: Colors.grey)),
])),
),
Center(
child: Text(((1 -
product[index].productSalePrice /
product[index]
.productListPrice) *
100)
.toStringAsFixed(0) +
'% Off', style: TextStyle(color: Colors.green),),
)
],
),
),
);
});
}
}