How to Reload Data When Using FutureBuilder In Flutter??

3 min read
How to Reload Data When Using FutureBuilder In Flutter
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.

Leave a Reply