Flutter Pull To Refresh - How to refresh Listview data in flutter

Last updated Sep 15, 2021

While using the mobile applications, user might wants to refresh the current screen data, to do this he has to go back and come to the screen. Instead of doing this we can make current screen data refresh by using the Refresh Indicator. Flutter provided a widget RefreshIndicator widget to make the list refresh functionality while pull the screen.

Flutter RefreshIndicator is material widget that supports swipe to refresh feature. When swipe the widget it will show a loading indicator at top. Mostly this widget we use to refresh the content of the Listview


Create Refresh Indicator

To create PullToRefresh indicator by adding the RefreshIndicator constructor to the widget. This RefreshIndicator has two required properties child & onRefresh Where child takes a scrollable widget and onRefresh is to handle callback to update the data


PullToRefresh Flutter example


Let's create a SwipToRefresh/PullToRefresh example

import 'dart:async';

import 'package:flutter/material.dart';

void main() {

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Tutorial',
        theme: ThemeData(
          primarySwatch: Colors.green,
        home: MyHomePage()

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key}) : super(key: key);
  _MyHomePageState createState() => _MyHomePageState();

class _MyHomePageState extends State {
  List data = [
    "Flutter Tutorial 1",
    "Flutter Tutorial 2",
    "Flutter Tutorial 3",
    "Flutter Tutorial 4",
    "Flutter Tutorial 5",

  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Flutter Refresh Indicator"),
        body: RefreshIndicator(
          onRefresh: () async {
            await Future.delayed(Duration(seconds: 2));
            children: List.generate(data.length, (index) =>
                  child: Container(
                    alignment: Alignment.center,
            shrinkWrap: true,
            padding: EdgeInsets.all(5),
            scrollDirection: Axis.vertical,
            itemExtent: 50,
          color: Colors.white,
          backgroundColor: Colors.purple,
          triggerMode: RefreshIndicatorTriggerMode.anywhere,
  void updateData(){

    new Timer.periodic(
        Duration(seconds: 1),
            (Timer timer){
              int i = data.length+1;
              data.add("Flutter Tutorial $i");
          setState(() {





Download Source code


Conclusion: In this flutter tutorial example we covered how to refresh list data with RefreshIndicator widget.

Article Contributed By :


Subscribe For Daily Updates

Flutter Questions
Android Questions