Infinite Dynamic ListView

by Apr 16, 2018Flutter36 comments

In this post, I will quickly go through how to make an infinite ListView, that dynamically loads more data when a user scrolls down to the end. The final solution should look like this:

Let’s get to it!

Starting point

Let’s start with a simple list of 10 integer elements.

. . .

Dynamic data loading

First, we need to create a method imitating an http request. Let’s assume that we can pass from and to parameters and as a result, we get items between them. We will also add some delay to make this method more network-ish. It can look like this:

We would like to call that method when the user scrolls to the end of theListView. The easiest way to do that is to attach ScrollController to it. ScrollController will listen for scrolling behavior and it will make a request when the user scrolls to the end. When it comes to making requests, it is important to prevent our app from doing them too often (doing request before the previous one has finished). My solution to that problem is to add a flag isPerformingRequest and start a new request, only if the flag is set to false. Code for this step should look like this:

If we run our app, we can see that items are being added dynamically. However, this solution is far from acceptable. We need to add some kind of indicator to inform the user that the request is being done.

. . .

Progress Indicator

Our main widget will be CircularProgressIndicator,  which will be wrapped in CenterOpacity and Padding. We are going to use the Opacity widget to show our progress indicator only when the request is being performed. The whole widget should look like this:

The last thing is to add this widget to our ListView:

The final solution should look like this:

. . .

Handling empty data

As a bonus, I will show you a simple way to handle a case, when no data is being returned from the request. All we need to do is to animate our ListView a bit using ScrollController:

Notice how we need to check if the user didn’t scroll up before response arrived. We are doing it by comparing edge with offsetFromBottom.

. . .

And that’s it, folks! 🙂

A gist containing whole class can be found here.

If you have any questions or suggestions on how to implement it better, I strongly encourage you to leave a comment.

Cheers 🙂

Marcin Szałek

Founder of Fidev

Flutter enthusiast since Alpha release in 2017. Believes that sharing is caring, which lead him to start a technical blog dedicated fo Flutter in its early days. Loves to see beautiful designs become real apps and is willing to help make it happen. Enjoys sunny beaches far from home.

Join the newsletter!

Join the newsletter to keep track with latest posts and get my special Widget to animate views' entrances without any hassle for FREE!

Check out other posts!

SY Travel UI Challenge

SY Travel UI Challenge

Check out the videos explaining how I implemented awesome SY Expedition Travel animation by Anton Skvortsov! In the following videos I will show you the whole process of creating a UI challenge in Flutter.

Thanos Snap Effect in Flutter

Thanos Snap Effect in Flutter

Have you ever woken up and thought “How awesome would it be to create Thanos snap effect in Flutter”? Probably not. Well… following Google’s Easter Egg I did. 🙂 And I’ve found out that no one did it in Flutter yet so why not give it a try! In this post, I will explain how I created a Thanos snap effect coming from Avengers: Infinity War movie. Enjoy 🙂

Advanced transitions – UI Tickets Challenge

Advanced transitions – UI Tickets Challenge

As developers, we have always get into situations where the designers require some fancy transitions which look awesome on the design but are extremely difficult to implement. Being Flutter developer makes it different, makes it fun because we have tools to do it! To prove it in this post, I will continue implementing awesome Buy Tickets design by Dldp and add bottom sheet transitions!

Share This

Share This

Share this post with your friends!