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.