Pull to refresh is one a great feature, It refresh the UI without pressing any button. We can add the refresh feature without making any changes to the UI. We don’t need to put any button in the app for refreshing.

Inspiration #

I have seen this features on lots of app. Before knowing about the pull to refresh feature I used to make a floating action button for refreshing the content.

I have also seen pull to refresh feature on these mobile applications

• Facebook
• Twitter
• G-mail
• Chrome
• Instagram

DEMO #

RefreshIndicator #

RefreshIndicator is a widget that supports the Material “swipe to refresh” idiom.

RefreshIndicator Widget has various property but two of it’s property is required. These two property are enough for implementing the Pull to refresh.

• Child:
• onRefresh:

We will make a simple app, On every Refresh it will add some new items to the list. It can add any number of item between 0 to 5. I am using Math library from Dart to generate new random number on every refresh.

main.dart

import 'package:flutter/material.dart';
import 'home.dart';

void main() {
  runApp(
    MaterialApp(
      home: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

Refresh Indicator is used to refresh the data. So we should make method which will get the latest data.

You can find fetchData method which we are using to refresh the data. We are also calling this method in intState. We are also using this method at argument to onRefresh to the Refresh Indicator. In this way we reuse our code.

Refresh Indicator child should be Scrollable Widget. I am using ListView.build but you can use some other widget also like

• ListView
• GridView
• CustomScrollView
• SingleChildScrollView
• All the widget which has ability to become Scrollable.

The refresh indicator will appear on the top of it’s child. When child of Refresh Indicator(Scrollable Widget) is over-scrolled then refresh indicator appears.

home.dart

import 'dart:math';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int count = 5;

  @override
  void initState() {
    super.initState();
    fetchData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Refresh Indicator Demo'),
      ),
      body: RefreshIndicator(
        onRefresh: fetchData,
        child: return RefreshIndicator(
          onRefresh: fetchData,
          child: ListView.builder
          (
              itemCount: count,
              itemBuilder: (context, index) {
                  return ListTile(
                    title: Text('Post ${index + 1}'),
                  );
              },
          ),
        ),
      ),
    );
  }

  Future<void> fetchData(){
    print('PULL TO REFRESH CALLBACK');
    count = count + (Maths().nextInt(5));
    setState((){});
  }
}

I recommend you to try this simple example before jumping into any complex logic.

Once you understand the fundamentals of RefreshIndicator, you can figure out everything what it can do and what is can’t.

Challenges #

• Showing Some kind of indictor to tell the user that it’s refreshing.
• Show some kind of message to tell page refreshed.
• If not able to refresh because of any issue then show the previous data.

You should try all these things because these are the practical cases which you should know. I can talk about the cases and challenges but I don’t recommend to see the code at first attempt.

Always try to build the things by yourself, If you fail 2-3 times then only ask for help or search on Internet. I am there to help, In case if you are not able to fix your problem then you can always ask here.

Conclusion #

In my opinion you can use this at most of places but there is small problem with this. All the user don’t know about this feature and there is no any visual representation of this which tell us. So, it’s difficult to tell the user that you have to pull the listView in order to refresh the app.

I know this problem is not with everyone but there are people who really don’t know about this feature. So, think once if your app audience lies in those category. Newer generation knows about this because they use phone all the time and they use Facebook, Chrome, Twitter and Instagram.