Flutter — How to make your ScrollView support pull-to-refresh?
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
- Cupertino style of refresh indicator in iOS.
- Known issues with
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:
- Wrap your
RefreshIndicatorlike L36 does.
- Provide a future task to the parameter
onRefreshin L37. The purpose of the future task is to fetch the new data, then refresh the widget.
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.