Implement Infinite Scrolling in a ListView - Flutter

| By Maina Wycliffe | | | Flutter

Subscribe for more content from me

Infinite scrolling is a technique where loading of content is done continuously as the user scrolls down, without any action from the user. This has popularized by social media sites and apps such as Twitter, where Twitter loads more tweets as you scroll down. This is a form of pagination but requires no user input to load the next page but instead watches scroll position. When they get close to the end, the next bunch of tweets gets loaded, as shown below:

ListView Infinite Scrolling in Flutter
ListView Infinite Scrolling in Flutter

Prerequisite

  • Flutter Installation and Setup – Link.

Creating a ListView

We are going to start by creating a ListView to display GitHub Repositories. We will use the GraphQL package for flutter and will load then in bunches of 20. We are also going to display a loading animation when adding fetching new GitHub repositories.

ListView(
  children: <Widget>[
    for (var repository in repositories)
      // .. list of widgets
    if (result.loading)
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          CircularProgressIndicator(),
        ],
      ),
  ],
),

Use ScrollController to Detect Scroll Position

Next, we need to determine when to load more GitHub Repositories, i.e. when we are at or near the bottom of the list view. To achieve this, we are going to use ScrollController – Link. We are going to listen to ScrollController, which will let us know whenever we scroll. We can then check if we are at the end or near the end of ListView, and in that case, we load more Repositories.

We will start by declaring a new widget property, named _scrollController.

class Widget extends StatelessWidget {
  // ...
  
  ScrollController _scrollController = new ScrollController();

  @override
  Widget build(BuildContext context) {
    // ...
  }
}

Then, we need to attach our ScrollController to our ListView above.

ListView(
  controller: _scrollController,
  children: <Widget>[
    // ... widgets
  ],
),

And finally, we need to listen to ScrollController and check where the user is at scrolling.

_scrollController
  ..addListener(() {
    if (_scrollController.position.pixels ==
        _scrollController.position.maxScrollExtent) {
      // ... call method to load more repositories
    }
  });

From the above code, we are waiting until the scroll position is at the very end. This might not be convenient for you and you might want to trigger the method to fetch more items earlier, let’s say at 90%.

_scrollController
  ..addListener(() {
    var triggerFetchMoreSize =
        0.9 * _scrollController.position.maxScrollExtent;

    if (_scrollController.position.pixels >
        triggerFetchMoreSize) {
      // call fetch more method here
    }
  });

Final Thoughts

This is a simple way to implement infinite scrolling inside a ListView in flutter. You can find the above demo in my GitHub account here.

Additional Resource

  • GraphQL Package for Flutter – Link.
  • ListView API Reference – Link.
  • ScrollController API Reference – Link.
  • GitHub GraphQL Explorer – Link.
Handling Requesting for Permissions Like a Pro in Flutter

In this lesson, we are going to look at how to request and check permissions on Android and IOS in Flutter. Package(s) Permission …

Read More
Flutter and GraphQL - How to Upload Files

In this post, I am going to show you how to upload files using GraphQL and flutter. To work with GraphQL in flutter, we are going to use …

Read More
Flutter - A Closer Look at How Pub Handles Dependency Versions

In this post, I want to look closely at how dart pub handles dependency versions. The end goal is to help you understand how to manage …

Read More
Flutter Building a Bottom Navigation Bar with "Flutter_Bloc"

I was in the middle implementing a BottomNavigationBar, when a thought crossed mind. Can I use bloc pattern to manage its state? …

Read More

Comments