Infinite scrolling in Flutter

Introduction

Infinite scrolling lets users keep scrolling to see more items without pressing buttons. It feels smooth and natural, like flipping through a long list.

Showing a long list of news articles that loads more as you scroll down.

Displaying social media posts where new content appears automatically.

Loading product lists in a shopping app without page numbers.

Browsing photos or videos that keep loading as you scroll.

Any app where you want to save space and load data little by little.

Syntax

Flutter

ListView.builder(
  controller: _scrollController,
  itemCount: items.length + 1,
  itemBuilder: (context, index) {
    if (index == items.length) {
      return const CircularProgressIndicator();
    }
    return ListTile(title: Text(items[index]));
  },
);

Use a ScrollController to detect when the user scrolls near the bottom.

Show a loading indicator at the end while new items load.

Examples

Basic list with 20 items, no infinite scroll yet.

Flutter

ListView.builder(
  itemCount: 20,
  itemBuilder: (context, index) => Text('Item $index'),
);

Detect when user scrolls to the bottom to load more data.

Flutter

ScrollController _controller = ScrollController();

_controller.addListener(() {
  if (_controller.position.pixels >= _controller.position.maxScrollExtent) {
    // Load more items
  }
});

Show a loading spinner at the end while fetching more items.

Flutter

ListView.builder(
  controller: _controller,
  itemCount: items.length + 1,
  itemBuilder: (context, index) {
    if (index == items.length) return const CircularProgressIndicator();
    return ListTile(title: Text(items[index]));
  },
);

Sample App

This app shows a list of items. When you scroll to the bottom, it waits 2 seconds and adds 10 more items. A spinning circle appears while loading.

Flutter

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: InfiniteScrollDemo());
  }
}

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

  @override
  State<InfiniteScrollDemo> createState() => _InfiniteScrollDemoState();
}

class _InfiniteScrollDemoState extends State<InfiniteScrollDemo> {
  final ScrollController _scrollController = ScrollController();
  final List<int> _items = List.generate(20, (index) => index);
  bool _isLoading = false;

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(() {
      if (_scrollController.position.pixels >= _scrollController.position.maxScrollExtent && !_isLoading) {
        _loadMoreItems();
      }
    });
  }

  Future<void> _loadMoreItems() async {
    setState(() => _isLoading = true);
    await Future.delayed(const Duration(seconds: 2));
    setState(() {
      _items.addAll(List.generate(10, (index) => _items.length + index));
      _isLoading = false;
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Infinite Scrolling Demo')),
      body: ListView.builder(
        controller: _scrollController,
        itemCount: _items.length + (_isLoading ? 1 : 0),
        itemBuilder: (context, index) {
          if (index == _items.length) {
            return const Padding(
              padding: EdgeInsets.all(16),
              child: Center(child: CircularProgressIndicator()),
            );
          }
          return ListTile(title: Text('Item ${_items[index]}'));
        },
      ),
    );
  }
}

Important Notes

Always dispose your ScrollController to avoid memory leaks.

Use a loading flag (_isLoading) to prevent multiple loads at once.

Test on different screen sizes to ensure smooth scrolling.

Summary

Infinite scrolling loads more content as the user scrolls down.

Use ScrollController to detect when to load more items.

Show a loading indicator while fetching new data.

Practice

1. What is the main purpose of using infinite scrolling in a Flutter app?

easy

A. To load more content automatically as the user scrolls down

B. To preload all data before showing the screen

C. To prevent any scrolling on the screen

D. To refresh the entire app when the user taps a button

Solution

1. Step 1: Understand infinite scrolling concept

   Infinite scrolling means loading more data automatically when the user reaches the bottom of the list.

2. Step 2: Compare options with this concept

   Only To load more content automatically as the user scrolls down describes loading more content as the user scrolls down, which matches infinite scrolling.

3. Final Answer:

   To load more content automatically as the user scrolls down -> Option A

4. Quick Check:

   Infinite scrolling = load more on scroll [OK]

Hint: Infinite scrolling means loading more items when scrolling down [OK]

Common Mistakes:

• Thinking infinite scrolling means preloading all data
• Confusing infinite scrolling with pull-to-refresh
• Assuming infinite scrolling disables scrolling

2. Which Flutter widget is commonly used to detect scroll position for infinite scrolling?

easy

A. TextEditingController

B. ScrollController

C. AnimationController

D. PageController

Solution

1. Step 1: Identify controller for scroll events

   ScrollController is designed to listen to scroll position changes in scrollable widgets.

2. Step 2: Eliminate unrelated controllers

   TextEditingController is for text input, AnimationController for animations, PageController for page views, so they don't detect scroll position.

3. Final Answer:

   ScrollController -> Option B

4. Quick Check:

   ScrollController detects scroll position [OK]

Hint: ScrollController tracks scroll position for infinite scroll [OK]

Common Mistakes:

• Using TextEditingController for scrolling
• Confusing PageController with ScrollController
• Not using any controller to detect scroll

3. Given this Flutter code snippet, what will happen when the user scrolls to the bottom?

ScrollController _controller = ScrollController();

_controller.addListener(() {
  if (_controller.position.pixels == _controller.position.maxScrollExtent) {
    print('Load more items');
  }
});

medium

A. Prints 'Load more items' when user reaches bottom

B. Nothing happens when scrolling to bottom

C. Throws an error because of missing setState

D. Scrolls back to top automatically

Solution

1. Step 1: Understand the listener logic

   The listener checks if the scroll position equals the max scroll extent, meaning user reached bottom.

2. Step 2: Check the action inside listener

   When condition is true, it prints 'Load more items' to console.

3. Final Answer:

   Prints 'Load more items' when user reaches bottom -> Option A

4. Quick Check:

   Scroll at bottom triggers print [OK]

Hint: Listener triggers action at maxScrollExtent (bottom) [OK]

Common Mistakes:

• Thinking setState is required for print statements
• Assuming nothing happens without UI update
• Confusing pixels with minScrollExtent

4. Identify the error in this infinite scrolling setup:

ScrollController _controller = ScrollController();

@override
void initState() {
  super.initState();
  _controller.addListener(() {
    if (_controller.position.pixels >= _controller.position.maxScrollExtent) {
      fetchMoreData();
    }
  });
}

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

medium

A. initState should not call super.initState()

B. Incorrect comparison operator in listener

C. Missing call to _controller.dispose() in dispose method

D. fetchMoreData() should be called in build method

Solution

1. Step 1: Check lifecycle methods for controller cleanup

   ScrollController must be disposed in dispose() to avoid memory leaks.

2. Step 2: Verify dispose method implementation

   dispose() calls super.dispose() but does not call _controller.dispose(), which is required.

3. Final Answer:

   Missing call to _controller.dispose() in dispose method -> Option C

4. Quick Check:

   Dispose controllers to prevent leaks [OK]

Hint: Always dispose controllers in dispose() method [OK]

Common Mistakes:

• Forgetting to dispose ScrollController
• Calling fetchMoreData() in build causing repeated calls
• Misunderstanding lifecycle method order

5. You want to implement infinite scrolling with a loading spinner at the bottom. Which approach correctly shows the spinner only while loading new items?

hard

A. Always show CircularProgressIndicator at bottom regardless of loading state

B. Replace entire ListView with spinner when loading

C. Use a Timer to show spinner for fixed 5 seconds after scroll

D. Add a boolean isLoading state; show CircularProgressIndicator in ListView footer when true

Solution

1. Step 1: Understand conditional UI for loading spinner

   Spinner should appear only when new data is loading, controlled by a boolean state.

2. Step 2: Evaluate options for showing spinner

   Add a boolean isLoading state; show CircularProgressIndicator in ListView footer when true uses isLoading boolean to conditionally show spinner in ListView footer, which is correct.

3. Step 3: Why other options are incorrect

   Always show CircularProgressIndicator at bottom regardless of loading state always shows spinner, confusing users. Use a Timer to show spinner for fixed 5 seconds after scroll uses fixed timer unrelated to actual loading. Replace entire ListView with spinner when loading hides list, bad UX.

4. Final Answer:

   Add a boolean isLoading state; show CircularProgressIndicator in ListView footer when true -> Option D

5. Quick Check:

   Show spinner only while loading = use boolean state [OK]

Hint: Use boolean state to toggle loading spinner visibility [OK]

Common Mistakes:

• Showing spinner all the time confusing users
• Using timers instead of actual loading state
• Hiding list instead of appending new items