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.
Features of pull_to_refresh
- this is null-safe
- you can pull up load and pull down refresh
- almost fit for all Scroll widgets like GridView,ListView etc.
- This package provide global setting of default indicator and property
- provide some most common indicators
- support’s Android and iOS default ScrollPhysics,the overScroll distance can be controlled,custom spring animate,damping,speed.
- Not required too much code and also easy to implement.
- supports horizontal and vertical refresh,reverse ScrollView also(four direction)
- provides more refreshStyles: Behind,Follow,UnFollow,Front,provide more loadmore style
- It support’s twoLevel refresh,implments
Read more about Flutter app development services from mobikul.
Implementation
Step-1
Add the required package in your pubspec.yaml file and then run the below-mentioned command
flutter pub get (As a result this command gets all the dependencies listed in the pubspec. yaml file)
To know more about pubspec.yaml please check this link.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
environment: sdk: ">=2.12.0 <3.0.0" dependencies: flutter: sdk: flutter pull_to_refresh: ^2.0.0 # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^1.0.2 |
Step-2
Now, the setup is complete and then we can move forward to the implementation in our flutter application.
Note:- Here I’m using the simple example for the demonstration of this package you can use this package according to your needs.
1- Add the below line in your class to import the package.
import ‘package:pull_to_refresh/pull_to_refresh.dart’;
2- Make a function to handle your business logic while refreshing the UI
|
1 2 3 4 |
void _onRefresh() async { await Future.delayed(Duration(seconds: 2)); _refreshController.refreshCompleted(); } |
3- Then create your view and start the implementation
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
import 'package:flutter/material.dart'; import 'package:pull_to_refresh/pull_to_refresh.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Pull To Refresh', debugShowCheckedModeBanner: false, theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(), ); } } class MyHomePage extends StatelessWidget { RefreshController _refreshController = RefreshController(initialRefresh: false); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Pull To Refresh'), ), body: SmartRefresher( controller: _refreshController, onRefresh: _onRefresh, header: WaterDropMaterialHeader( backgroundColor: Colors.amber, ), child: Center( child: Text('This is demo application'), ), ), ); } } |
Note:- In some cases, you will notice that the refresh indicator is not showing.
To make it visible all the time please use the physics property. In Flutter all the scrollable widgets have physics properties.
ListView(
physics: const AlwaysScrollPhysics()
…….
)
Complete the above mentioned code then you will get this output.
As a result, you will get the same output as below attached video.
For more information about this package please check this link
Hopefully, this blog will be helpful to you to understand the pull_to_refresh. If you have any queries, please write them in the comment section.
2 comments