In this tutorial, I will show you how to do pagination in listview. and scroll up to load next page.

The video version will be updated to YouTube Channel soon. please subscribe to my channel :)

https://www.youtube.com/channel/UCauwVvZbcWSfHcgfWFIl0lg

The concept is we store data into a List, every time when we loading a new page, we add new items into the List. So, let’s create a list items and a function _loadData() to load more data. Whenever we call _loadData() , we append new items to the list items like this items.addAll( [‘new item’]);

List<String> items = ['item 1', 'item 2']; Future _loadData() async {

// perform fetching data delay

await new Future.delayed(new Duration(seconds: 2)); // update data and loading status

setState(() {

items.addAll( ['new item']);

});

}

Let’s prepare a listview to display data.

if you don’t know how to build listview, check the basic listview tutorial here:

Then when do we trigger the _loadData() function?

When we reach the bottom of the screen.

scrollInfo.metrics.pixels == scrollInfo.metrics.maxScrollExtent

And we need the system to notify us that we have reached the bottom of the screen. So we need to use NotificationListener to wrap our listview

NotificationListener<ScrollNotification>(

onNotification: (ScrollNotification scrollInfo) {

if (!isLoading && scrollInfo.metrics.pixels == scrollInfo.metrics.maxScrollExtent) {

// start loading data

setState(() {

isLoading = true;

});

_loadData();

}

},

child: ListView.builder(

itemCount: items.length,

itemBuilder: (context, index) {

return ListTile(

title: Text('${items[index]}'),

);

},

),

),

The last step is let’s add some animation like CircularProgressIndicator() to show loading status. When isLoading = true , we show the container, if not, then hide it by updating the height to 0px.

Container(

height: isLoading ? 50.0 : 0,

color: Colors.transparent,

child: Center(

child: new CircularProgressIndicator(),

),

),

Then that’s it!

The final main.dart should look like following.

You can download the source code from Github.

Simple listview pagination demo:

https://github.com/railsgem/FlutterTutorial/tree/master/05_flutter_listview_pagination

Advanced pagination demo with HTTP request and image — a client for unsplash.com https://github.com/railsgem/unsplash_explore

Thanks for reading!