The pull-to-refresh or (swipe-to-refresh) feature enables a user to pull down to fetch more data. The pull-to-refresh feature can be seen in many modern apps. The pull-to-refresh feature can be implemented in those components that are scrollable.
In this article, we are going to implement this feature in Flutter. If you are not familiar with flutter please visit flutter.dev before diving into this article. Flutter is all about widgets everything in flutter is nothing but widgets. Flutter also provides a widget to implement this feature as well as i.e RefreshIndicator.
RefreshIndicator: When the child’s Scrollable descendant overscrolls, an animated circular progress indicator is faded into view. When the scroll ends, if the indicator has been dragged far enough for it to become completely opaque, the onRefresh callback is called. The callback is expected to update the scrollable’s contents and then complete the Future it returns. The refresh indicator disappears after the callback’s Future has completed.
To create a flutter application open terminal/ command and run the below command:
flutter create app_name // app_name should be the name of your app Example: flutter create demo_app
After running this command you should have a folder with the specified app_name. Navigate into that folder and open lib/main.dart file.
Note: In order to implement pull-to-refresh feature we are not going to use any other dependencies.
To create a RefreshIndicator use the below syntax:
RefreshIndicator( child: ... onRefresh: ... ) These are required fields. child: Should be a scrollable widget onRefresh: A function that should return a future. Future is a type in dart.
We are going to implement this step by step.
Step 1: As discussed above for RefreshIndicator to work we are going to need a scrollable component. So for that, we are going to use ListView. In this step, we are going to define some demo data for our app.
Step 2: We are going to create our ListView with ListItem and AlwaysScrollingPhysics.
Step 3: Finally wrapping ListView into RefreshIndicator to use pull-to-refresh feature.
Complete Source Code:
Note: In some cases, you will notice that the refresh indicator is not showing. To make it visible all the time please use physics: In Flutter all the scrollable widgets have physics properties.
The below will enable scrolling even if there are only a few elements in the list.
ListView( physics: const AlwaysScrollableScrollPhysics(), ... )