Pull-to-refresh in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What happens when you pull down on a ListView wrapped with RefreshIndicator?

Consider a Flutter app with a RefreshIndicator wrapping a ListView. What is the expected behavior when the user pulls down on the list?

Flutter

RefreshIndicator(
  onRefresh: () async {},
  child: ListView.builder(
    itemCount: 10,
    itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
  ),
)

A A loading spinner appears at the top and the onRefresh callback is triggered.

B The list scrolls up without any visual feedback or callback.

C The app crashes because RefreshIndicator cannot wrap ListView.

D Nothing happens because onRefresh is empty.

💡 Hint

Think about what RefreshIndicator is designed to do when the user pulls down.

The RefreshIndicator widget shows a circular progress indicator when the user pulls down on its child scrollable widget. It then calls the onRefresh callback to allow refreshing data.

❓ lifecycle

intermediate

What is the correct return type of the onRefresh callback in RefreshIndicator?

In Flutter's RefreshIndicator, what must the onRefresh callback return?

A Future<void>

B void

C bool

D int

💡 Hint

Consider that the refresh action is asynchronous and the indicator waits for it to complete.

The onRefresh callback must return a Future<void> because the RefreshIndicator shows the spinner until the future completes.

📝 Syntax

advanced

Which code snippet correctly implements pull-to-refresh with RefreshIndicator?

Choose the Flutter code snippet that correctly implements a pull-to-refresh feature using RefreshIndicator and updates the list items.

Flutter

class MyList extends StatefulWidget {
  @override
  State<MyList> createState() => _MyListState();
}

class _MyListState extends State<MyList> {
  List<String> items = ['A', 'B', 'C'];

  Future<void> _refresh() async {
    await Future.delayed(Duration(seconds: 1));
    setState(() {
      items.add('D');
    });
  }

  @override
  Widget build(BuildContext context) {
    return RefreshIndicator(
      onRefresh: _refresh,
      child: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) => ListTile(title: Text(items[index])),
      ),
    );
  }
}

A Change onRefresh to: onRefresh: () { _refresh(); }

B The code above as is.

C Change _refresh to return void instead of Future<void>.

D Remove setState call inside _refresh.

💡 Hint

Remember that onRefresh expects a Future and setState updates UI.

The code correctly returns a Future from _refresh, calls setState to update the list, and passes _refresh to onRefresh.

🔧 Debug

advanced

Why does the RefreshIndicator spinner never disappear?

A developer uses RefreshIndicator but the spinner stays visible forever after pulling down. What is the most likely cause?

Flutter

RefreshIndicator(
  onRefresh: () async {
    // Forgot to complete the future
  },
  child: ListView(...),
)

A The RefreshIndicator must be inside a Scaffold.

B The ListView is not scrollable, so RefreshIndicator doesn't work.

C The onRefresh callback must return void, not Future.

D The onRefresh future never completes, so spinner stays visible.

💡 Hint

Think about what controls the spinner visibility.

The spinner stays visible because the Future returned by onRefresh never completes. The RefreshIndicator waits for this future to finish before hiding the spinner.

🧠 Conceptual

expert

How to enable pull-to-refresh only when the list is scrolled to the top?

In Flutter, how does RefreshIndicator ensure that pull-to-refresh activates only when the scrollable is at the top?

A It requires a manual check in onRefresh to verify scroll position.

B It triggers pull-to-refresh regardless of scroll position.

C It listens to the scroll position and triggers only if offset is zero or less.

D It disables pull-to-refresh if the list has more than 10 items.

💡 Hint

Think about how scroll position affects user gestures.

The RefreshIndicator internally listens to the scroll controller and only triggers the refresh gesture if the scroll offset is at the top (zero or less), preventing accidental refreshes when scrolled down.