Debug School

rakesh kumar
rakesh kumar

Posted on

How to Pull To Refresh In Flutter using refresh indicator

First Method
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()),
              ],
            ),
          ),
        );


      }),
),
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

Screen 1
Image description

Screen 2
Image description

Step 1: passs refresh in route

Image description

Step 2: Set bool variable
Image description

Step 3: Apply Ternary operator

Image description

Step 3: Apply if else

Image description

Output
Before click
Image description
After click
Image description
Go Back
Image description

Second Method

In Api total 6 record showing but in emulator 4 record showing so we have to implement refresh
Image description

Image description

Solution
Image description

Image description

Image description

Output
Image description

Image description

Practial Example
Image description

Image description

click here
click here
click here
click here
click here
click here
click here

Top comments (0)