Infinite scrolling in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Detecting scroll position for infinite scrolling

In Flutter, which code snippet correctly detects when the user has scrolled to the bottom of a ListView to trigger loading more items?

Flutter

ScrollController _controller = ScrollController();

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

A if (_controller.position.pixels >= _controller.position.minScrollExtent) { /* load more */ }

B if (_controller.position.pixels == _controller.position.maxScrollExtent) { /* load more */ }

C if (_controller.offset == 0) { /* load more */ }

D if (_controller.position.atEdge) { /* load more */ }

💡 Hint

Think about when the scroll position reaches the bottom edge.

The scroll position's pixels equal to maxScrollExtent means the user reached the bottom. Option B checks this exactly. Option B checks if at any edge (top or bottom), which is not specific enough.

❓ lifecycle

intermediate

Properly disposing ScrollController

Which Flutter widget lifecycle method is the best place to dispose a ScrollController to avoid memory leaks?

A dispose()

B initState()

C didChangeDependencies()

D build()

💡 Hint

Think about cleaning up resources when the widget is removed.

dispose() is called when the widget is removed permanently. It's the right place to dispose controllers. initState() is for initialization, build() runs often, and didChangeDependencies() is for dependency changes.

📝 Syntax

advanced

Correct async data loading in infinite scroll

Which code snippet correctly loads more data asynchronously when the user scrolls to the bottom, updating the UI in Flutter?

Flutter

void _loadMore() async {
  final newItems = await fetchItems();
  setState(() {
    items.addAll(newItems);
  });
}

_controller.addListener(() {
  if (_controller.position.pixels == _controller.position.maxScrollExtent) {
    _loadMore();
  }
});

A Use async function _loadMore with await fetchItems and call setState to add new items.

B Call fetchItems without await and update items directly without setState.

C Use a synchronous function to fetch items and update items inside setState.

D Call setState before await fetchItems to update UI early.

💡 Hint

UI updates must happen inside setState after data is ready.

Option A correctly waits for data asynchronously, then updates state inside setState. Option A misses await and setState, so UI won't update properly. Option A updates UI before data is ready. Option A uses synchronous fetch which is unrealistic for network calls.

❓ navigation

advanced

Maintaining scroll position after navigation

After navigating back to a screen with infinite scrolling, which approach preserves the scroll position in Flutter?

A Use a GlobalKey to rebuild the entire widget tree.

B Create a new ScrollController every time the widget rebuilds.

C Reset the scroll position to zero in initState().

D Keep the ScrollController as a member variable and do not recreate it on rebuild.

💡 Hint

Think about keeping the controller alive to remember scroll offset.

Keeping the same ScrollController preserves scroll offset. Creating a new one resets position. Resetting scroll to zero loses position. GlobalKey rebuilds widget but does not preserve scroll automatically.

🧠 Conceptual

expert

Handling rapid scroll events in infinite scrolling

What is the best way to prevent multiple simultaneous data fetches when the user scrolls quickly to the bottom multiple times in Flutter infinite scrolling?

A Call the data fetch function every time the scroll reaches bottom without checks.

B Clear the items list before each fetch to avoid duplicates.

C Use a boolean flag to track if a fetch is in progress and ignore new fetch requests until done.

D Use a timer to delay all fetches by 5 seconds.

💡 Hint

Think about how to avoid starting a new fetch before the previous finishes.

Using a boolean flag (e.g., isLoading) prevents starting multiple fetches simultaneously. Calling fetch every time causes duplicate requests. Clearing items loses data. Delaying fetches arbitrarily can cause bad UX.