Pagination in flutter listview is way to load the data when you reach end of the list.
The pagination is use for load the data in part wise.
And pagination make the app fast.
Pagination in flutter listview divide the data in page manner like page 1 and page .
In flutter we are using scrollView controller to achieve the pagination.
You may also check our Flutter app development company
ScrollView controller
ScrollController is use for hold the state of scrollview.
ScrollController can we use with multiple scrollable widgets.
The ScrollController use offset to handle and control the scrollable widgets.
And the scroll controller use the scroll position to manage the scrollable widgets.
Flutter Listview
Listview is a very common widgets which have scrollable feature.
Listview use for show the unlimited data which coming from aaray.
The listview is very fast because its reuse the cells to show the data.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
final List<String> entries = ['A', 'B', 'C']; final List<int> colorCodes = [600, 500, 100]; ListView.builder( padding: const EdgeInsets.all(8), itemCount: entries.length, itemBuilder: (BuildContext context, int index) { return Container( height: 50, color: Colors.amber[colorCodes[index]], child: Center(child: Text('Entry ${entries[index]}')), ); } ); |
Scroll controller pagination example
We will take one list view and then we will use scroll controller listener.
|
1 |
var scrollcontroller = ScrollController(); |
Above line is the scroll controller object which we use with list view to find bottom of list view in screen
now we will take listview to show the data according to index in each cell. and we will use scroll controller listener for perform the pagination.
In below code initstate function have listener code which contain pagination function.
Pagination function have last row scroll condition and current products length less than total products condition.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Pagination View"), ), body: Column( children: <Widget>[ Container( height: 50.0, color: Colors.green, child: Center( child: Text(message), ), ), Expanded( child: ListView.builder( itemCount: 30, itemBuilder: (context, index) { return ListTile(title: Text("Segment : $index")); }, ), ), ], ), ); } @override void initState() { //added the pagination function with listener scrollcontroller.addListener(pagination); super.initState(); } //_subCategoryModel only use for check the length of product void pagination() { if ((scrollController.position.pixels == scrollController.position.maxScrollExtent) && (_subCategoryModel.products.length < total)) { setState(() { isLoading = true; page += 1; //add api for load the more data according to new page }); } } |
And thanks for reading this blog, for detail info please click here
For more blogs please click here.
So pls follow the above step and And if you have any issues or suggestions you can leave your message in the comment section I will try to solve this.