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