Pull-to-refresh in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a pull-to-refresh feature using the correct Flutter widget.

Flutter

return Scaffold(
  body: [1](
    onRefresh: _refreshData,
    child: ListView(),
  ),
);

Drag options to blanks, or click blank then click option'

AGestureDetector

BRefreshIndicator

CSingleChildScrollView

DContainer

Attempts:

3 left

💡 Hint

Common Mistakes

Using GestureDetector instead of RefreshIndicator.

Wrapping with Container which does not support pull-to-refresh.

The RefreshIndicator widget provides the pull-to-refresh functionality in Flutter.

2fill in blank

medium

Complete the code to define the refresh callback that returns a Future.

Flutter

Future<void> _refreshData() async {
  await Future.delayed([1]);
  // Add your data refresh logic here
}

Drag options to blanks, or click blank then click option'

ADuration(seconds: 1)

B1000

C1

DDuration(milliseconds: 100)

Attempts:

3 left

💡 Hint

Common Mistakes

Passing an integer directly instead of a Duration object.

Using milliseconds without Duration wrapper.

The Future.delayed expects a Duration object to specify the delay time.

3fill in blank

hard

Fix the error in the RefreshIndicator usage by completing the missing parameter.

Flutter

RefreshIndicator(
  child: ListView(),
  [1]: _refreshData,
);

Drag options to blanks, or click blank then click option'

AonPull

BrefreshCallback

ConRefresh

DonSwipe

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect parameter names like refreshCallback or onPull.

Omitting the onRefresh parameter.

The correct parameter name for the refresh callback in RefreshIndicator is onRefresh.

4fill in blank

hard

Fill both blanks to create a RefreshIndicator with a ListView that has 5 items.

Flutter

RefreshIndicator(
  onRefresh: _refreshData,
  child: ListView.builder(
    itemCount: [1],
    itemBuilder: (context, index) {
      return ListTile(title: Text('Item $[2]'));
    },
  ),
);

Drag options to blanks, or click blank then click option'

A5

Bindex + 1

C10

Dindex

Attempts:

3 left

💡 Hint

Common Mistakes

Using itemCount as 10 when only 5 items are needed.

Displaying index directly without adding 1.

The itemCount should be 5 to show five items, and the displayed item number is index + 1 to start counting from 1.

5fill in blank

hard

Fill all three blanks to implement a RefreshIndicator that updates a list of strings after refresh.

Flutter

class MyHomePage extends StatefulWidget {
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> items = ['Apple', 'Banana', 'Cherry'];

  Future<void> [1]() async {
    await Future.delayed(Duration(seconds: 1));
    setState(() {
      items.[2]('Date');
    });
  }

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

Drag options to blanks, or click blank then click option'

ArefreshList

Badd

CrefreshData

Dappend

Attempts:

3 left

💡 Hint

Common Mistakes

Using different function names in declaration and onRefresh.

Using 'append' which is not a Dart List method.

The refresh function is named refreshList, which is used in onRefresh. To add a new item to the list, use the add method.

Practice

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

easy

A. To navigate between different screens

B. To create a button for submitting forms

C. To enable pull-to-refresh functionality on a scrollable widget

D. To display a loading spinner on app startup

Solution

1. Step 1: Understand the role of RefreshIndicator

   The RefreshIndicator widget provides a pull-to-refresh feature that triggers an update when the user drags down on a scrollable list.

2. Step 2: Identify the correct use case

   It is specifically designed to wrap scrollable widgets like ListView to refresh their content.

3. Final Answer:

   To enable pull-to-refresh functionality on a scrollable widget -> Option C

4. Quick Check:

   Pull-to-refresh = RefreshIndicator usage [OK]

Hint: RefreshIndicator is for pull-to-refresh on scrollable lists [OK]

Common Mistakes:

• Confusing RefreshIndicator with navigation widgets
• Using RefreshIndicator on non-scrollable widgets
• Thinking it creates buttons or spinners

2. Which of the following is the correct syntax to add a pull-to-refresh feature using RefreshIndicator in Flutter?

easy

A. RefreshIndicator(child: ListView(), refresh: _refresh)

B. RefreshIndicator(onRefresh: _refresh, child: ListView())

C. RefreshIndicator(refreshCallback: _refresh, child: ListView())

D. RefreshIndicator(onRefresh: _refresh())

Solution

1. Step 1: Recall RefreshIndicator parameters

   The RefreshIndicator requires an onRefresh callback and a child widget that is scrollable.

2. Step 2: Check correct parameter names and usage

   RefreshIndicator(onRefresh: _refresh, child: ListView()) correctly uses onRefresh: _refresh and child: ListView(). RefreshIndicator(child: ListView(), refresh: _refresh) uses wrong parameter name refresh. RefreshIndicator(refreshCallback: _refresh, child: ListView()) uses refreshCallback which is incorrect. RefreshIndicator(onRefresh: _refresh()) calls _refresh() instead of passing the function.

3. Final Answer:

   RefreshIndicator(onRefresh: _refresh, child: ListView()) -> Option B

4. Quick Check:

   Correct parameters = RefreshIndicator(onRefresh: _refresh, child: ListView()) [OK]

Hint: Use onRefresh and child parameters exactly [OK]

Common Mistakes:

• Using wrong parameter names like refresh or refreshCallback
• Calling the refresh function instead of passing it
• Not providing a scrollable child widget

3. Given the code snippet below, what will happen when the user pulls down on the list?

RefreshIndicator(
  onRefresh: () async {
    await Future.delayed(Duration(seconds: 2));
  },
  child: ListView(
    children: [Text('Item 1'), Text('Item 2')],
  ),
)

medium

A. A loading spinner appears for 2 seconds, then stops

B. The list will refresh immediately without delay

C. The app will crash due to missing return value

D. Nothing happens because onRefresh is empty

Solution

1. Step 1: Analyze the onRefresh callback

   The onRefresh callback returns a Future that completes after a 2-second delay using Future.delayed.

2. Step 2: Understand RefreshIndicator behavior

   When the user pulls down, the RefreshIndicator shows a loading spinner until the Future completes, so it will show for 2 seconds then stop.

3. Final Answer:

   A loading spinner appears for 2 seconds, then stops -> Option A

4. Quick Check:

   Async delay = spinner visible 2 seconds [OK]

Hint: Async onRefresh delays spinner duration [OK]

Common Mistakes:

• Assuming immediate refresh without delay
• Thinking the app crashes without explicit return
• Believing nothing happens if no data changes

4. Identify the error in this Flutter code snippet that uses RefreshIndicator:

RefreshIndicator(
  onRefresh: () async {
    // refresh logic
  },
  child: Column(
    children: [Text('Item 1'), Text('Item 2')],
  ),
)

medium

A. The child widget must be scrollable, Column is not scrollable

B. The onRefresh callback must return a boolean

C. RefreshIndicator cannot have children widgets

D. The async keyword is not allowed in onRefresh

Solution

1. Step 1: Check the child widget type

   The child of RefreshIndicator must be a scrollable widget like ListView or CustomScrollView. Column is not scrollable.

2. Step 2: Understand the impact of non-scrollable child

   Using Column will cause the pull-to-refresh gesture not to work because the widget does not scroll.

3. Final Answer:

   The child widget must be scrollable, Column is not scrollable -> Option A

4. Quick Check:

   Scrollable child required = The child widget must be scrollable, Column is not scrollable [OK]

Hint: RefreshIndicator child must scroll (ListView, not Column) [OK]

Common Mistakes:

• Thinking async is disallowed in onRefresh
• Expecting onRefresh to return boolean
• Believing any widget can be child

5. You want to implement pull-to-refresh on a list that fetches data from the internet. Which approach correctly updates the UI after refreshing?

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

class _MyListState extends State<MyList> {
  List<String> items = ['Old item'];

  Future<void> _refresh() async {
    final newData = await fetchDataFromInternet();
    // What should you do here?
  }

  @override
  Widget build(BuildContext context) {
    return RefreshIndicator(
      onRefresh: _refresh,
      child: ListView(
        children: items.map((e) => Text(e)).toList(),
      ),
    );
  }
}

hard

A. Return newData from _refresh without updating items

B. Just assign items = newData without setState

C. Call Navigator.pop(context) after fetching data

D. Call setState(() { items = newData; }) inside _refresh to update UI

Solution

1. Step 1: Understand state update in StatefulWidget

   To update the UI after fetching new data, you must call setState with the new data assigned to the state variable.

2. Step 2: Apply setState in _refresh method

   Inside _refresh, wrap the assignment of items = newData in setState to notify Flutter to rebuild the widget with updated data.

3. Final Answer:

   Call setState(() { items = newData; }) inside _refresh to update UI -> Option D

4. Quick Check:

   State update requires setState call [OK]

Hint: Use setState to update UI after async data fetch [OK]

Common Mistakes:

• Updating state variables without setState
• Returning data without updating state
• Using navigation calls instead of state update