Flutter Infinite Scrolling

Requisite

Have you ever use Instagram and/or Facebook application? Especially on your leisure time keep scrolling your timeline or home page seeing what's new and viral while you're laying on your bed.

If you get some "big" data from server and put it into the app, your app will become slow, lagging and near to ANR. You need to separate data response from server into few parts (we can call it "page") and user can get each separated data when click on other page or reach on the bottom of the page. This method is called pagination and infinity scroll. Wonder how to do it in flutter? Let's create this.

How to do infinite scrolling in flutter

Currently we use Scroll Controller in ListView to make the list control and get new API request if user reaches the bottom of the list. We also using BLoC for event-state management

First thing you need to create a project using BLoC. This tutorial refers to this page

As we said before, we use Scroll Controller to control user behavior in order to scrolling list to the top or bottom.

At the ListView, we can find a parameter named 'controller' to determine what action when user scrolling to the ListView.

We also using flag _canLoadMore to define the state when the list can load more data.

_scrollController.offset >= _scrollController.position.maxScrollExtent

This code block means if user reaches the bottom of the ListView, you can hit more data.

This code block means a part you want to manipulate when the response successfully loaded. you can add CircularProgressIndicator to the bottom of item list every time the data from API is loaded.

fully code on my github

Happy Coding :)