Flutter - Infinite Scroll Pagination

Infinite lists are a way to display paginated data efficiently. When a user scrolls to the end of the current page, more data is fetched and added to the list. This is also known as endless scrolling pagination, infinite scrolling pagination, auto-pagination, lazy loading pagination, and progressive loading pagination. It is good because it loads data only when the user interacts with the list. When data in the list is bigger it is better to use this widget for the app's performance optimizations and Interactive UI for Users.

What Will We Make?

We will create a user list with his/her name and email address. We get these data from Punk API. We will call an API Call to get data from it. A sample video is given below to get an idea about what we are going to do in this article.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Add Package in your pubspec.yaml file

Step 3: Import the library in your page

Step 4: Add Controllers and page size

Pagination Controllers is controller to manage the data refresh it,add page listeners

Step 5: Add API Request and get data

To get the data from sample API we will use http package

Step 6: Update the API data in controllers and add listener to it

We create a function which will add the data in page controller

We will add a listener in init state to call the previous function whenver user go to next page or when more data is required to load

Step 7: We will add UI in body to show infinite scroll page view

Now we will add a paged listview in our screens

Step 8: Dispose the Controller

Step 9: Refresh the listview on pulling down

You are good to go!!!

Additional Tips

We have used the listview seperated here to show the data. You can use different widget available in

• GridView: A widget for creating a scrollable grid layout of items.
• SliverGrid: Similar to GridView, but used within a CustomScrollView for more advanced scrolling effects.
• ListView: Displays a scrollable list of widgets in a single column.
• SliverList: A list within a CustomScrollView for dynamic and optimized scrolling.
• Custom Layout: Custome layout as per you requirement

In all this option seperated constructor is also available

Complete Source Code

Output: