In this blog, we will see the RefreshIndicator widget and its properties in the flutter. If something changes in data from API then it does not update in the app so we need to load the data again in our app. Flutter provides us a RefreshIndicator widget that can be used to update the data in the app. and We will see in this implementation of a demo program on the RefreshIndicator Widget.
Table Contents:
RefreshIndicator:
RefreshIndicator is a widget in a flutter. It is used to update the data in the app. RefreshIndicator will trigger a refresh when the list is over-scrolled. It is showing a circular progress indicator if you want something to happen, add a callback function with the onRefrence property.
This function is not given any parameters, but RefreshIndicator expects it to return a future. the even spinning indicator of refreshing will continue spinning as long as that future is pending. as the spinning end, it will call onRefresh.You can customize your callback function.
Demo Module :
Code Implementation:
How to implement code in the dart file:
First, we will create a _buildCardDesign() widget. In this widget, we will return a Container(). Inside, we will add margin and its child property, we will add ListView.builder(). We will add itemCount, shrinkWrap was true, scrollDirection was Axis. vertical and itemBuilder. In itemBuilder, we will pass BuildContext context, int index parameter, and return _buildCardView() method.
We will deeply define below the code.
Widget _buildCardDesign() {
return Container(
margin: EdgeInsets.all(5),
child: ListView.builder(
itemCount: itemCount,
shrinkWrap: true,
physics: const BouncingScrollPhysics(
parent: AlwaysScrollableScrollPhysics()),
scrollDirection: Axis.vertical,
itemBuilder: (BuildContext context, int index) {
return _buildCardView();
}),
);
}We will define buildCardView() method:
We will create a _buildCardView() method. In this method, we will return Container. Inside, we will add a network image and wrap it on ClipRRect() widget. Also, we will add some text hardcoded and star icons.
Widget _buildCardView() {
return Container(
width: MediaQuery.of(context).size.width,
child: Container(
margin: EdgeInsets.all(10),
height: 100,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(20))),
child: Container(
//color: Colors.pinkAccent,
padding: EdgeInsets.fromLTRB(10, 20, 10, 20),
child: Row(
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: Image.network(
"https://s1.1zoom.me/big0/716/Brunette_girl_Hair_Glance_Model_Colored_background_593058_1365x1024.jpg",
height: 60.0,
width: 60.0,
fit: BoxFit.cover,
),
),
//SizedBox(width: 20,),
Container(
padding: EdgeInsets.only(left: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Text(
"Neelu Modanwal",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 16),
),
),
Container(
padding: EdgeInsets.only(top: 5),
child: Text(
"Your opinion matters!",
style: TextStyle(color: Colors.black, fontSize: 15),
),
),
Container(
padding: EdgeInsets.only(top: 5),
child: Text(
"Dev, do you have a moment?We'd love",
style: TextStyle(color: Colors.black, fontSize: 11),
),
),
],
),
),
Column(
children: [
Text(
"4:15 AM",
style: TextStyle(
color: Colors.grey,
fontWeight: FontWeight.bold,
fontSize: 12),
),
SizedBox(
height: 22,
),
Container(
// height: 20,
// width: 20,
margin: EdgeInsets.only(left: 10),
//color: Colors.pinkAccent,
child: Icon(
Icons.star,
color: Colors.grey,
),
)
],
),
],
),
),
),
);
}When we run the application, we ought to get the screen’s output like the underneath screen capture.
And the second one, I have implemented RefreshIndicator on the whole screen. When swiping the screen. it rendered the progress indicator and call the own propertyonRefresh.And I have increased the length of the list by one according to the number of swipes in the onRefresh function with the delay sometimes. The code snippet is given below.
RefreshIndicator(
displacement: 250,
backgroundColor: Colors.yellow,
color: Colors.red,
strokeWidth: 3,
triggerMode: RefreshIndicatorTriggerMode.onEdge,
onRefresh: () async {
await Future.delayed(Duration(milliseconds: 1500));
setState(() {
itemCount = itemCount + 1;
});
},
child: Scaffold(
backgroundColor: Color(0xff246df8),
appBar: AppBar(
title: Text('Refresh Indicator'),
backgroundColor: Color(0xff246df8),
),
body: _buildCardDesign(),
),
);When we run the application, we ought to get the screen’s output like the underneath screen capture.
Conclusion:
In this article, I have explained the basic overview of the RefreshIndicator Widget in a flutter, you can modify this code according to your choice. This was a small introduction to RefreshIndicator Widget On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying up the Explore, RefreshIndicator Widget in your flutter projects.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
GitHub Link:
find the source code of the RefreshIndicator Demo:
GitHub – flutter-devs/swipe_refresh_by_refreshIndicator
Contribute to flutter-devs/swipe_refresh_by_refreshIndicator development by creating an account on GitHub.github.com
Feel free to connect with us
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
