Flutter — How to make your ScrollView support pull-to-refresh?

RefreshIndicator comes to help!

It’s an useful behavior on the mobile app that when we scroll to the top of a vertical scroll view, and overscroll, a refresh indicator will drop down, then the new data updates after we release the control. Flutter provides a handy widget called RefreshIndicator for this purpose.

As the official documentation says, RefreshIndicator is a widget that supports the Material “swipe to refresh” idiom. Today, we’re going to learn how to implement it in our ScrollView.

Table of Contents

1. Implement RefreshIndicator in ListView.
2. Implement RefreshIndicator in CustomScrollView.
3. Cupertino style of refresh indicator in iOS.
4. Known issues with WebView.

Implement RefreshIndicator in ListView

Let’s try to display 100 random numbers which are generated from Random().nextInt() at the beginning. After pulling to refresh, a new list of random numbers will be regenerated and display on the screen.

Follow the steps to achieve it:

1. Wrap your ListView into RefreshIndicator like L36 does.
2. Provide a future task to the parameter onRefresh in L37. The purpose of the future task is to fetch the new data, then refresh the widget.

Implement RefreshIndicator in CustomScrollView

RefreshIndicator can also be used for CustomScrollView. As the following code, we create a CustomScrollView with a SliverList and a SliverGrid. You can refer to my previous post for the CustomScrollView details.