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.