Pull-to-refresh in Flutter - Mini App: Build & Ship

Build: PullToRefreshList

A screen that shows a list of items and allows the user to refresh the list by pulling down from the top.

Target UI

-------------------------
| PullToRefreshList      |
-------------------------
| Item 1                 |
| Item 2                 |
| Item 3                 |
| ...                    |
|                        |
-------------------------

Display a scrollable list of at least 5 items labeled 'Item 1', 'Item 2', etc.

Implement pull-to-refresh gesture to reload the list with updated items.

When refreshed, append ' (refreshed)' to each item label.

Show a loading spinner during refresh.

Starter Code

Flutter

import 'package:flutter/material.dart';

class PullToRefreshList extends StatefulWidget {
  @override
  State<PullToRefreshList> createState() => _PullToRefreshListState();
}

class _PullToRefreshListState extends State<PullToRefreshList> {
  List<String> items = List.generate(5, (index) => 'Item ${index + 1}');

  Future<void> _refresh() async {
    // TODO: Implement refresh logic
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('PullToRefreshList')),
      body: RefreshIndicator(
        onRefresh: _refresh,
        child: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            return ListTile(title: Text(items[index]));
          },
        ),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Solution

Flutter

import 'package:flutter/material.dart';

class PullToRefreshList extends StatefulWidget {
  @override
  State<PullToRefreshList> createState() => _PullToRefreshListState();
}

class _PullToRefreshListState extends State<PullToRefreshList> {
  List<String> items = List.generate(5, (index) => 'Item ${index + 1}');

  Future<void> _refresh() async {
    await Future.delayed(Duration(seconds: 2));
    setState(() {
      items = items.map((item) => '$item (refreshed)').toList();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('PullToRefreshList')),
      body: RefreshIndicator(
        onRefresh: _refresh,
        child: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            return ListTile(title: Text(items[index]));
          },
        ),
      ),
    );
  }
}

This Flutter app shows a list of 5 items. The RefreshIndicator widget wraps the list and detects the pull-to-refresh gesture. When the user pulls down, the _refresh method runs, simulating a 2-second delay to mimic loading data. Then it updates the list by adding ' (refreshed)' to each item and calls setState to refresh the UI. The loading spinner appears automatically during the refresh.

Final Result

Completed Screen

-------------------------
| PullToRefreshList      |
-------------------------
| Item 1 (refreshed)     |
| Item 2 (refreshed)     |
| Item 3 (refreshed)     |
| Item 4 (refreshed)     |
| Item 5 (refreshed)     |
|                        |
-------------------------

User scrolls down from the top to trigger pull-to-refresh.

A circular loading spinner appears at the top.

After 2 seconds, the list updates to show '(refreshed)' appended to each item.

Stretch Goal

Add a button in the app bar to reset the list to original items without '(refreshed)'.

💡 Hint

Add an IconButton in AppBar actions that calls setState to reset the items list.