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 application development for infinite scrolling (pagination)in ListView and we are like.

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 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

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

dependencies:
  flutter_pagination_helper: ^1.0.0+5

• Import required files and initialize PaginatedListWidget as follows.

class CustomProgressWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: PaginatedListWidget(
            progressWidget: Center(
              child: Text("Loading..."),
            ),
            itemListCallback: OnScrollCallback()),
      ),
    );
  }
}

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.

class OnScrollCallback<T extends Widget> extends ItemListCallback {
  @override
  Future<EventModel<T>> getItemList() {
    // TODO: implement getItemList
    return null;
  }
}

• 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.

class EventModel<T extends Widget> {
  final bool progress;
  final List<T> data;
  final String error;
  final bool stopLoading;

  EventModel({this.progress, this.data, this.error, this.stopLoading});
}

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

Default Progress Widget

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

Custom progress widget

Conclusion :

For the major requirement of Flutter ListView pagination, 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

flutter_pagination_helper | Flutter Package