Flutter – RefreshIndicator Widget

The RefreshIndicator widget in Flutter is commonly used to implement pull-to-refresh functionality in a ListView, GridView, or any scrollable widget. In this article, we are going to implement the RefreshIndicator widget and explore some properties of it. A sample video is given below to get an idea about what we are going to do in this article.

Basic Syntax of RefreshIndicator

Dart

RefreshIndicator(
  onRefresh: () async {
    // Your refresh logic here
  },
  child: YourScrollableWidget(),
)

Required Tools

To build this app, you need the following items installed on your machine:

• Visual Studio Code / Android Studio
• Android Emulator / iOS Simulator / Physical Device device.
• Flutter Installed
• Flutter plugin for VS Code / Android Studio.

Step By Step Implementations

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Import the Package

First of all import material.dart file.

import 'package:flutter/material.dart';

Step 3: Execute the main Method

Here the execution of our app starts.

Dart

void main() {
  runApp(MyApp());
}

Step 4: Create MyApp Class

In this class we are going to implement the MaterialApp , here we are also set the Theme of our App.

Dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.green, // Set the app's primary theme color
      ),
      debugShowCheckedModeBanner: false,
      title: 'RefreshIndicator Example',
      home: RefreshIndicatorExample(),
    );
  }
}

Step 5: Create RefreshIndicatorExample Class

In this class we are going to Implement the RefreshIndicator widget that help to implement pull-to-refresh functionality in a ListView. Comments are added for better understanding.

      body: RefreshIndicator(
        onRefresh: _refreshData, // Callback function for refresh action
        child: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(items[index]),
            );
          },
        ),
      ),

Dart

class _RefreshIndicatorExampleState extends State<RefreshIndicatorExample> {
  // List of items for the ListView
  List<String> items = List.generate(20, (index) => 'Item ${index + 1}');

  Future<void> _refreshData() async {
    // Simulate a delay to mimic fetching new data from a data source
    await Future.delayed(Duration(seconds: 2));

    // Add new items or update the data here
    setState(() {
      items = List.generate(20, (index) => 'New Item ${index + 1}');
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('RefreshIndicator Example'),
      ),
      body: RefreshIndicator(
        onRefresh: _refreshData, // Callback function for refresh action
        child: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(items[index]),
            );
          },
        ),
      ),
    );
  }
}

Here is the full Code of main.dart file

Dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.green, // Set the app's primary theme color
      ),
      debugShowCheckedModeBanner: false,
      title: 'RefreshIndicator Example',
      home: RefreshIndicatorExample(),
    );
  }
}

class RefreshIndicatorExample extends StatefulWidget {
  @override
  _RefreshIndicatorExampleState createState() =>
      _RefreshIndicatorExampleState();
}

class _RefreshIndicatorExampleState extends State<RefreshIndicatorExample> {
  // List of items for the ListView
  List<String> items = List.generate(20, (index) => 'Item ${index + 1}');

  Future<void> _refreshData() async {
    // Simulate a delay to mimic fetching new data from a data source
    await Future.delayed(Duration(seconds: 2));

    // Add new items or update the data here
    setState(() {
      items = List.generate(20, (index) => 'New Item ${index + 1}');
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('RefreshIndicator Example'),
      ),
      body: RefreshIndicator(
        onRefresh: _refreshData, // Callback function for refresh action
        child: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(items[index]),
            );
          },
        ),
      ),
    );
  }
}

Output: