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

RefreshIndicator comes to help!

Image for post
Image for post

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.

  1. 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.
Image for post
Image for post

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.

Image for post
Image for post

Parameters

There are also some parameters we can use to change the UI.

RefreshIndicator(
onRefresh: _refreshRandomNumbers,
displacement: 200.0,
child: ListView.builder(...),
);
Image for post
Image for post
RefreshIndicator(
onRefresh: _refreshRandomNumbers,
color: Colors.blue,
backgroundColor: Colors.red,
strokeWidth: 10.0,
child: ListView.builder(...),
);
Image for post
Image for post

Cupertino style of refresh indicator in iOS

We can also change the style of refresh indicator to Cupertino style. CupertinoSliverRefreshControl is an iOS equivalent of the pull-to-refresh pattern. Here is the documentation:

Image for post
Image for post
@override
Widget build(BuildContext context) => CustomScrollView(
physics: const BouncingScrollPhysics(),
slivers: [
CupertinoSliverRefreshControl(
onRefresh: _refreshRandomNumbers,
),
_sliverListView,
_sliverGridView,
],
);

Issues

I’ve tried to implement pull-to-refresh function on the WebView, however, it didn’t seem to work. Then I found an issue on the Flutter Github about this.

An Android/Flutter engineer at Line Corporation.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store