Pull-to-refresh in Flutter

Introduction

Pull-to-refresh lets users update content by dragging down on the screen. It feels natural and easy, like refreshing a page.

When showing a list of news articles that can update with new stories.

In a chat app to load the latest messages.

On a social media feed to get new posts.

In a shopping app to refresh product availability.

When displaying weather info that changes often.

Syntax

Flutter

RefreshIndicator(
  onRefresh: () async {
    // Your refresh code here
  },
  child: ListView(
    children: [
      // Your list items
    ],
  ),
)

The onRefresh function must return a Future<void>.

The child is usually a scrollable widget like ListView.

Examples

Simple pull-to-refresh that prints a message when triggered.

Flutter

RefreshIndicator(
  onRefresh: () async {
    print('Refreshing...');
  },
  child: ListView(
    children: [Text('Item 1'), Text('Item 2')],
  ),
)

Pull-to-refresh with a 2-second delay simulating data loading.

Flutter

RefreshIndicator(
  onRefresh: () async {
    await Future.delayed(const Duration(seconds: 2));
  },
  child: ListView.builder(
    itemCount: 5,
    itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
  ),
)

Sample App

This app shows a list of fruits. When you pull down and release, it waits 1 second and adds a new item with the current time. The list updates automatically.

Flutter

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: RefreshExample(),
    );
  }
}

class RefreshExample extends StatefulWidget {
  const RefreshExample({super.key});

  @override
  State<RefreshExample> createState() => _RefreshExampleState();
}

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

  Future<void> _refresh() async {
    await Future.delayed(const Duration(seconds: 1));
    setState(() {
      items.add('New fruit at ${DateTime.now().toLocal().toIso8601String()}');
    });
  }

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

Important Notes

Make sure the child widget is scrollable, or pull-to-refresh won't work.

You can customize the spinner color with the color property.

Test pull-to-refresh on a real device or emulator with touch support.

Summary

Pull-to-refresh lets users update content by dragging down on a list.

Use RefreshIndicator with an async onRefresh callback.

The child must be a scrollable widget like ListView.