Implementing Infinite Scroll Pagination in Flutter: Load Fake Data Seamlessly with Index-based Items

Adding infinite scroll pagination to your Flutter app can significantly improve user experience by loading more content as the user scrolls, eliminating the need for pagination buttons. In this guide, we’ll walk through creating an InfiniteScrollPaginationView using Flutter’s ListView and ScrollController. This approach is ideal for loading additional data on-demand in a mobile-friendly and seamless manner.

Why Infinite Scroll Pagination?
Infinite scroll pagination is especially beneficial for data-heavy applications, as it allows users to scroll through content endlessly, loading new items only when needed. This method reduces initial load times and optimizes resource usage.

Step 1: Create the InfiniteScrollPaginationView Widget

We’ll start by creating a new stateful widget, InfiniteScrollPaginationView, to manage and render the paginated list of items.

import 'package:flutter/material.dart';

class InfiniteScrollPaginationView extends StatefulWidget {
  const InfiniteScrollPaginationView({super.key});

  @override
  State<InfiniteScrollPaginationView> createState() =>
      _InfiniteScrollPaginationViewState();
}

The stateful widget allows us to maintain the list of items, control the scroll behavior, and dynamically load more data as the user scrolls.

Step 2: Define the State and Scroll Controller

In the _InfiniteScrollPaginationViewState class, initialize a ScrollController to detect when the user has scrolled to the end of the list. We also define a _records list to store loaded items and manage pagination.

class _InfiniteScrollPaginationViewState extends State<InfiniteScrollPaginationView> {
  final _scrollController = ScrollController();
  final _records = List.generate(20, (index) => 'Item ${index + 1}');
  int _currentPage = 1;

• _scrollController: Tracks the scroll position of the ListView.
• _records: Holds the list of items currently loaded, initially populated with 20 items.
• _currentPage: Tracks the current page, incrementing with each new data load.

Step 3: Configure the Scroll Listener in initState

We’ll add a listener to the ScrollController to trigger data loading when the end of the list is reached.

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(_loadMore);
  }

Step 4: Load More Data on Scroll

The _loadMore function checks if the user has scrolled to the end of the list. When triggered, it increments _currentPage and adds a new batch of items to _records.

void _loadMore() {
    if (_scrollController.position.pixels ==
        _scrollController.position.maxScrollExtent) {
      setState(() {
        _currentPage++;
        _records.addAll(List.generate(
            20, (index) => 'Item ${index + 1 + _currentPage * 20}'));
      });
    }
  }

Step 5: Dispose of the ScrollController

To avoid memory leaks, always dispose of the ScrollController when it’s no longer needed.

@override
void dispose() {
  _scrollController.dispose();
  super.dispose();
}

Step 6: Build the ListView

Finally, we create a ListView.builder to display items from _records. This ListView uses _scrollController to manage scrolling behavior.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Infinite Scroll'),
      ),
      body: ListView.builder(
        controller: _scrollController,
        itemCount: _records.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(_records[index]),
          );
        },
      ),
    );
  }

Complete Code Example Here

import 'package:flutter/material.dart';

class InfiniteScrollPaginationView extends StatefulWidget {
  const InfiniteScrollPaginationView({super.key});

  @override
  State<InfiniteScrollPaginationView> createState() =>
      _InfiniteScrollPaginationViewState();
}

class _InfiniteScrollPaginationViewState
    extends State<InfiniteScrollPaginationView> {
  final _scrollController = ScrollController();
  final _records = List.generate(20, (index) => 'Item ${index + 1}');
  int _currentPage = 1;

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(_loadMore);
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  void _loadMore() {
    if (_scrollController.position.pixels ==
        _scrollController.position.maxScrollExtent) {
      setState(() {
        _currentPage++;
        _records.addAll(List.generate(
            20, (index) => 'Item ${index + 1 + _currentPage * 20}'));
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Infinite Scroll'),
      ),
      body: ListView.builder(
        controller: _scrollController,
        itemCount: _records.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(_records[index]),
          );
        },
      ),
    );
  }
}

Implementing Infinite Scroll Pagination in Flutter: Load Fake Data Seamlessly with Index-based Items

Now Leaning Infinite Scrolling Using API Integration

How to Implement Infinite Scrolling in Flutter with API Integration

Sponsor @bhargavraviya on GitHub Sponsors

Raviya Technical is creating flutter open source project for starter kit