Flutter RefreshIndicator Widget Example

In this article, we are going to integrate flutter refreshindicator widget in flutter app to refresh listview data. You can also check out flutter listview related articles.

To implement pull to refresh functionality in flutter app, we do not need to use any third party library or package. Flutter Material Widget provides RefreshIndicator widget which is used for swipe to refresh data in flutter application. In this flutter example, we are displaying static soccer players data in listview. Whenever users pull to refresh listview, same static data will be added.

RefreshIndicator widget is used to update data in flutter listview. We can also customize this circular progress indicator. We can change color of indicator using color property of RefreshIndicator widget. We can also set background color of indicator using backgroundColor property.

We can also change width of stroke of refresh indicator using strokeWidth property. displacement property is used to set measurement of refresh indicator from top or bottom edge. onRefresh callback is used to detect when users drag refresh indicator to refresh data.

 

Flutter RefreshIndicator Widget

import ‘package:flutter/material.dart’;

class MyRefreshIndicatorListViewScreen extends StatefulWidget {
@override
_MyRefreshIndicatorListViewScreenState createState() => _MyRefreshIndicatorListViewScreenState();
}

class _MyRefreshIndicatorListViewScreenState extends State<MyRefreshIndicatorListViewScreen> {

var sectionsCount = 1;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(‘Flutter Refresh Indicator Sample’)),
body: RefreshIndicator(
color: Colors.white,
backgroundColor: Colors.orangeAccent,
displacement: 200,
strokeWidth: 4,
triggerMode: RefreshIndicatorTriggerMode.onEdge,
onRefresh: () async {
await Future.delayed(Duration(milliseconds: 2000));
setState(() {
sectionsCount = sectionsCount + 1;
});
},
child: Container(
child: ListView.builder(
itemCount: sectionsCount,
shrinkWrap: true,
physics: const BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
scrollDirection: Axis.vertical,
itemBuilder: (context, position) {
return Column(
children: [
ListTile(
leading: CircleAvatar(
radius: 25,
backgroundImage: NetworkImage(“https://resources.premierleague.com/premierleague/photos/players/40×40/p14937.png”),
),
title: Text(“Cristiano Ronaldo”,
style:
TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
subtitle: Text(
“Forward” +
” | ” +
“Manchester United” +
” | ” +
“Portugal”,
style: TextStyle(fontSize: 16),
maxLines: 1,
),
),
ListTile(
leading: CircleAvatar(
radius: 25,
backgroundImage: NetworkImage(“https://resources.premierleague.com/premierleague/photos/players/40×40/p61366.png”),
),
title: Text(“Kevin De Bruyne”,
style:
TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
subtitle: Text(
“Midfielder” +
” | ” +
“Manchester City” +
” | ” +
“Belgium”,
style: TextStyle(fontSize: 16),
maxLines: 1,
),
),
ListTile(
leading: CircleAvatar(
radius: 25,
backgroundImage: NetworkImage(“https://resources.premierleague.com/premierleague/photos/players/40×40/p97032.png”),
),
title: Text(“Virgil van Dijk”,
style:
TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
subtitle: Text(
“Defender” +
” | ” +
“Liverpool” +
” | ” +
“Netherlands”,
style: TextStyle(fontSize: 16),
maxLines: 1,
),
),
ListTile(
leading: CircleAvatar(
radius: 25,
backgroundImage: NetworkImage(“https://resources.premierleague.com/premierleague/photos/players/40×40/p109745.png”),
),
title: Text(“Kepa Arrizabalaga”,
style:
TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
subtitle: Text(
“Goalkeeper” +
” | ” +
“Chelsea” +
” | ” +
“Spain”,
style: TextStyle(fontSize: 16),
maxLines: 1,
),
)
],
);
}),
),
),
);
}
}

 
 
 
flutter refreshindicator
 
 

One thought on “Flutter RefreshIndicator Widget Example

Leave a Reply