How to Pull To Refresh In Flutter using refresh indicator
Step – 1
refresh-indicator-pull-to-refresh-indicator-in-flutter
RefreshIndicator Widget:
RefreshIndicator is a widget in Flutter that supports Material’s swipe-to-refresh. It works by showing a circular progress indicator when the child’s Scrollable is overscrolled. If the user ends the scroll and the indicator has been dragged far enough, it will call onRefresh. You can define your own callback function. Usually the callback contains code to update the data.
Add RefreshIndicator Widget and add a function to do while refreshing in onRefresh.
Follow me for more Stuff !
RefreshIndicator(
onRefresh: refreshList,
backgroundColor: Colors.purple,
color: Colors.white,
child: ListView.builder(
itemCount: 40,
itemBuilder: (context,i){
return Container(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
Text(i.toString()),
],
),
),
);
}),
),
The function sholud be call on future.
Future<Null> refreshList() async{
await Future.delayed(Duration(seconds: 10));
}
onRefresh the apicall should be done!
Future<Null> refreshList() async{
await Apicall();
}
Apicall(){
//write api call
}
Screen 1
![](https://www.bestdevops.com/wp-content/uploads/2023/03/ix1tdqaetkfmpnxd87uc.png)
Screen 2
![](https://www.bestdevops.com/wp-content/uploads/2023/03/gnx0a0fm4e66r9b04bvn.png)
Step 1: passs refresh in route
![](https://www.bestdevops.com/wp-content/uploads/2023/03/mcc4uu5v1unqy9ol5mkj.png)
Step 2: Set bool variable
![](https://www.bestdevops.com/wp-content/uploads/2023/03/qpsedqqfim022ny74ywm.png)
Step 3: Apply Ternary operator
![](https://www.bestdevops.com/wp-content/uploads/2023/03/n10sc04xfoglgephbuyr.png)
Step 3: Apply if else
![](https://www.bestdevops.com/wp-content/uploads/2023/03/xmedgtco3djtkk09nqra.png)
Output
Before click
![](https://www.bestdevops.com/wp-content/uploads/2023/03/h33dmdpvpqn843i3wdzx-1.png)
After click
![](https://www.bestdevops.com/wp-content/uploads/2023/03/4lsc1o03njwbso6wc8ak-1.png)
Go Back
![](https://www.bestdevops.com/wp-content/uploads/2023/03/axz78amp1lwmj1r8sufr-1.png)