How to Reload Data When Using FutureBuilder In Flutter??
FutureBuilder is a widget that builds itself based on the latest snapshot of interaction with a Future. In today’s article, we will go through how to reload data when using FutureBuilder in the flutter.
Are you ready?? So let’s jump into learning!!
How to Reload Data When Using FutureBuilder In Flutter?
Widget createListView(BuildContext context, AsyncSnapshot snapshot) {
RaisedButton button = RaisedButton(onPressed: () {
setState(() {});
}, child: Text('Refresh'),);
//.. here create widget with snapshot data and with necessary button
}
So the builder is properly rebuilt on changing the future if you trigger the change with setState.
The problem is, the hasData and hasError aren’t reset until the response is back. But we can use connectionState instead.
final builder = FutureBuilder(
future: _future,
builder: (context, snapshot) {
if (snapshot.connectionState != ConnectionState.done) {
return _buildLoader();
}
if (snapshot.hasError) {
return _buildError();
}
if (snapshot.hasData) {
return _buildDataView();
}
return _buildNoData();
});
Here’s a post on the issue and a linked repo showing the issue and solution: https://www.greycastle.se/reloading-future-with-flutter-futurebuilder/
You can refresh the widget by clicking on FlatButton. The code is as the snippet shown below.
class _MyHomePageState extends State<MyHomePage> {
String display;
Widget futureBuilder() {
return new FutureBuilder<String>(builder: (context, snapshot) {
// if(snapshot.hasData){return new Text(display);} //does not display updated text
if (display != null) {
return new Text(display);
// return your createListView(context, snapshot);
}
return new Text("no data yet");
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Home Page"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
FlatButton(onPressed: () async{
result = await _getData();
print(result);
// Result will be your json response
setState(() {
display = result; //assign any string value from result to display variable.
});
},
child: new Text("Get Data")
),
futureBuilder()
],
),
),
);
}
Future<List<String>> _getData() async {
var values = new List<String>();
await new Future.delayed(new Duration(seconds: 5));
return values;
}
Widget createListView(BuildContext context, AsyncSnapshot snapshot) {
}
}
Conclusion:
Thanks for being with us on a Flutter Journey !!! Stay tuned
So in this article, we have been through how to reload data when using FutureBuilder in the flutter.
Do let us know in the comments how did you find this article!!
Keep Learning !!! Keep Fluttering !!!
Do let us know if you are still confused about something in flutter development. We are here to help you 🙂
Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.
Flutter Agency is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.
