How to Paginate Your Data in Flutter?

A simple workaround for the infinite scroll (Pagination) in Flutter ListView!

We face many requirements in our daily flutter app development for infinite scrolling (pagination)in ListView.

We start creating ListView then create a list of widgets and set scroll listener and set error or failure scenarios and then lastly, stop the pagination when data loading is completed.

What if I tell you that you have one widget in which you just need to pass your callback with data which will be called when user reach to the end of the list.

So I’ll first mention how we can implement pagination with a straight forward way and then we’ll look for some better approach.

1. Implement Flutter Pagination from Scratch

So one initial note to mobile developers that in Android or iOS we were reusing one single view in the list with different data, for eg. if in one viewport there are 7 items visible then, view objects will be created for the same to be reused.

But in Flutter, architecture is designed in a manner that whenever data is updated all view components(or you can say widget) will be recreated.

• So first we need one ListView widget and one scroll listener to listen to the event when the user reaches at the end of the list to update the data.

• Secondly, you need to return an appropriate widget on data retrieves. It can be a progress bar, list of widgets or error text as shown in the below code snippet. You can use the Bloc — Stream builder pattern to manage progress, data or error state.

• You can display progress at the bottom by returning widget conditionally. You can return view if data retrieves or progress if data is null as shown in below snippet.

You can get the full source for above implementation from here

Now let’s head up to some smart workaround.

2. Implement pagination using Flutter Pagination Helper

So I figured out some common and boilerplate code and made a generalized solution and created a library for that named Flutter Pagination Helper.

Here are the steps to implement pagination in flutter

• Implement flutter pagination dependency by declaring that in pubspec.yaml

• Import required files and initialize PaginatedListWidget as follows.

where progressWidget is an optional parameter to assign your custom progress widget and itemListCallback is required parameter in which you need to provide the call back for data in the form of Future.

• Implement ItemListCallback as bellow.

• Here you need to return your items in the form of Future<EventModel<T>>

Where EventModel is model which stores different states such as progress bar visibility, data, and error message as below.

And your output for the list with default progress widget will be as bellow.

And the output for a list with custom progress widget will be as bellow.

Conclusion :

For the major requirement of Flutter pagination ListView, Flutter Pagination Helper will be a more suitable option and for more specification, you can go with the first option.

You can find the full source for the library at