Flutter — LoadMore in ListView with Button and Autoload on Scroll

Karthik Ponnam

3 min readDec 22, 2018

Hello,

In our daily life, we build may flutter application which has ListView in it.

Sometimes we have a huge list of data and we need to paginate the data.

So, Let’s see an example how to implement LoadMore functionality with ListView

Let’s Create a DataSource

Let’s Create a ListWidget from DataSource

Here our Sample with ListView

We need to convert StateLessWidget to StateFullWidget

Now for converting this huge data list into small parts with LoadMore

Step 1

Declare two variables perPage and present, perPage Holds the no of items in each Page and present holds the no of items loaded.

Step 2

While creating Data Source we copy it to two variables originalItems and items.

Step 3

This would be implementing Load More button when there are more items in the list

Here in the code itemCount if present i.e., no of items loaded is lessthan or equal to total no of items in original list then we return +1 so we can add LoadMore else we return the size of the list

Inside itemBuilder if index of the list is equals to the length of the items then we return a LoadMore button else a normal ListTile

Step 4

Now only functionality left is implementing LoadMore.

Inside onPressed we add the below code

Here in the code if present + perPage will become new final no of list to be loaded is greater then out complete original list length then we pass originalItems.length in the getRange else we pass present + perPage in getRange

Our Output will be as below

Our Complete main.dart file will be

Additional Auto Load on Scroll

If you want to automatically load more items when the user scrolls to the bottom of the list. In order to achieve this, we need to use NotificationListener<ScrollNotification>

To achieve this, we need to wrap our ListView.builder inside NotificationListener<ScrollNotification>

Our code will look like this

If you need to load more before it reaches end the try paying with this line of code

if (scrollInfo.metrics.pixels == scrollInfo.metrics.maxScrollExtent)

Then loadMore()will be as below

Our final main.dart file will be as below

Hope you Like it.
Need any articles regarding any topic please let me know

Thanks for your time.

Hope you like it, if yes clap & share.