Implement Infinite Scrolling in a ListView - Flutter
Tags: flutter, ios, android, beginners
Published: 2019-10-03 19:28:04

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:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/qwlf9e1nrjzafb9txpgw.gif)

### Prerequisite 

- Flutter Installation and Setup – [Link](https://flutter.dev/docs/get-started/install).

### Creating a ListView

We are going to start by creating a ListView to display GitHub Repositories. We will use the GraphQL package for [flutter](https://github.com/zino-app/graphql-flutter/) and will load then in bunches of 20. We are also going to display a loading animation when adding fetching new GitHub repositories.

```dart
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](https://api.flutter.dev/flutter/widgets/ScrollController-class.html). 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`.

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

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

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

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

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

```dart
_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%.

```dart
_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](https://github.com/mainawycliffe/flutter-infinite-scrolling).

### Additional Resource 

- GraphQL Package for Flutter – [Link](https://github.com/zino-app/graphql-flutter/).
- ListView API Reference – [Link](https://api.flutter.dev/flutter/widgets/ListView-class.html).
- ScrollController API Reference – [Link](https://api.flutter.dev/flutter/widgets/ScrollController-class.html).
- GitHub GraphQL Explorer – [Link](https://developer.github.com/v4/explorer/).