Flutter, render widget after async call

Question

I would like to render a widget that needs an HTTP call to gather some data.

Got the following code (simplified)

import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:convert';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'async demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  var asyncWidget;

  @override
  initState() {
    super.initState();

    loadData().then((result) {
      print(result);
      setState(() {
       asyncWidget = result;
      });
    });
  }

  loadData() async {
    var widget = new AsyncWidget();
    return widget.build();
  }

  @override
  Widget build(BuildContext context) {

    if(asyncWidget == null) {
      return new Scaffold(
        appBar: new AppBar(
          title: new Text("Loading..."),
        ),
      );
    } else {
      return new Scaffold(
        appBar: new AppBar(
          title: new Text(widget.title),
        ),
        body: new Center(
          child: this.asyncWidget,
        ),
      );
    }
  }
}

class MyRenderer {

  MyRenderer();

  Widget render (List data) {

    List<Widget> renderedWidgets = new List<Widget>();

    data.forEach((element) {
      renderedWidgets.add(new ListTile(
        title: new Text("one element"),
        subtitle: new Text(element.toString()),
      ));
    });
    var lv = new ListView(
      children: renderedWidgets,
    );
    return lv;
  }
}

class MyCollector {

  Future gather() async {

    var response = await // do the http request here;

    return response.body;
  }
}

class AsyncWidget {

  MyCollector collector;
  MyRenderer renderer;

  AsyncWidget() {
    this.collector = new MyCollector();
    this.renderer = new MyRenderer();
  }

  Widget build() {

    var data = this.collector.gather();
    data.then((response) {
      var responseObject = JSON.decode(response);
      print(response);
      return this.renderer.render(responseObject);
    });
    data.catchError((error) {
      return new Text("Oups");
    });
  }
}

My code works like this : the widget using async data takes a collector (which make the http call) and a renderer which will render the widgets with the http data. I create an instance of this widget on the initState() and then I make my async call.

I found some documentation saying that we should use the setState() method to update the widget with the new data but this doesn't work for me.

However when I put some logs, i see the HTTP call is done and the setState() method is called, but the widget does not update.

Possible duplicate of Firestore async load and populate listview flutter — Rémi Rousselet
– Rémi Rousselet, Commented Apr 19, 2018 at 21:44

Charlie Lee · Accepted Answer · 2023-01-27 08:06:54Z

113

The best way to do this is to use a FutureBuilder.

From the FutureBuilder documentation:

new FutureBuilder<String>(
  future: _calculation, // a Future<String> or null
  builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
    switch (snapshot.connectionState) {
      case ConnectionState.none: return new Text('Press button to start');
      case ConnectionState.waiting: return new Text('Awaiting result...');
      default:
        if (snapshot.hasError)
          return new Text('Error: ${snapshot.error}');
        else
          return new Text('Result: ${snapshot.data}');
    }
  },
)

The other thing is that you're building your widget outside of the State.build method and saving the widget itself, which is an anti-pattern. You should be actually building the widgets each time in the build method.

You could get this to work without FutureBuilder, but you should save the result of the http call (processed appropriately) and then use the data within your build function.

See this, but note that using a FutureBuilder is a better way to do this and I'm just providing this for you to learn.

import 'dart:async';
import 'dart:convert';

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'async demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List data;

  @override
  initState() {
    super.initState();

    new Future<String>.delayed(new Duration(seconds: 5), () => '["123", "456", "789"]').then((String value) {
      setState(() {
        data = json.decode(value);
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    if (data == null) {
      return new Scaffold(
        appBar: new AppBar(
          title: new Text("Loading..."),
        ),
      );
    } else {
      return new Scaffold(
        appBar: new AppBar(
          title: new Text(widget.title),
        ),
        body: new Center(
          child: new ListView(
            children: data
                .map((data) => new ListTile(
                      title: new Text("one element"),
                      subtitle: new Text(data),
                    ))
                .toList(),
          ),
        ),
      );
    }
  }
}

edited Jan 27, 2023 at 8:06

Charlie Lee

685 bronze badges

answered Apr 19, 2018 at 23:34

rmtmckenzie

40.7k10 gold badges121 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Alexi Coard Over a year ago

I definitely messed up with the Futures in my code, you example is way simpler. Thanks, will try to use a futureBuilder in the future;)

Nelson Bwogora Over a year ago

its also important to consider the case where there is a network error eg no internet connection you can add a check for that in the switch statement if (snapshot?.data?.exception?.clientException is NetworkException) { return buildEmptyPlaceHolder(); }

Sayed M. Idrees Over a year ago

Is there anyway we can change State (SetState) when the Future Builder is Completed?

rmtmckenzie Over a year ago

If you're going to do that, you might as well follow the second example which simply does call setState and use the result of the call. If you really wanted to do it in a FutureBuilder you have a few options; one is to simply add whatever you wanted to happen onto the end of the Future (i.e. Future(...).then((result) { doWhatever(); return result;});. or you could do it in the builder for the FutureBuilder, but being aware that that could be called multiple times.

Sanjayrajsinh · Accepted Answer · 2021-03-23 05:59:40Z

40

Full Example

Best way for rander widget after async call is using FutureBuilder()

class _DemoState extends State<Demo> {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder<String>(
      future: downloadData(), // function where you call your api
      builder: (BuildContext context, AsyncSnapshot<String> snapshot) {  // AsyncSnapshot<Your object type>
        if( snapshot.connectionState == ConnectionState.waiting){
            return  Center(child: Text('Please wait its loading...'));
        }else{
            if (snapshot.hasError)
              return Center(child: Text('Error: ${snapshot.error}'));
            else
              return Center(child: new Text('${snapshot.data}'));  // snapshot.data  :- get your object which is pass from your downloadData() function
        }
      },
    );
  }
  Future<String> downloadData()async{
    //   var response =  await http.get('https://getProjectList');    
    return Future.value("Data download successfully"); // return your response
  }
}

In future builder, it calls the future function to wait for the result, and as soon as it produces the result it calls the builder function where we build the widget.

AsyncSnapshot has 3 state:

1. connectionState.none -- In this state future is null
2. connectionState.waiting -- [future] is not null, but has not yet completed
3. connectionState.done -- [future] is not null, and has completed. If the future completed successfully, the [AsyncSnapshot.data] will be set to the value to which the future completed. If it completed with an error, [AsyncSnapshot.hasError] will be true

edited Mar 23, 2021 at 5:59

answered Dec 17, 2019 at 10:13

Sanjayrajsinh

17.5k10 gold badges82 silver badges84 bronze badges

1 Comment

softice Over a year ago

Isn't this against the FutureBuiler documentation that says - The future must have been obtained earlier, e.g. during State.initState, State.didUpdateConfig, or State.didChangeDependencies. It must not be created during the State.build or StatelessWidget.build method call when constructing the FutureBuilder. If the future is created at the same time as the FutureBuilder, then every time the FutureBuilder's parent is rebuilt, the asynchronous task will be restarted.

Collectives™ on Stack Overflow

Flutter, render widget after async call

2 Answers 2

4 Comments

Full Example

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Full Example

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related