snippet17 January, 2018

Run async operation on widget creation

I often see people trying to execute an asyncronous operation in the render method of a widget. This doesn't work, but is also bad because it gets called every time the state or properties get updated. It can lead to a lot of unneccessary work. A StatefulWidget needs to be used to do this properly.

main.dart

class MyWidget extends StatefulWidget {
    @override
    State createState() => new MyWidgetState();
}

class MyWidgetState extends State<MyWidget> {
    var _result;

    @override
    void initState() {
        // This is the proper place to make the async calls        // This way they only get called once                // During development, if you change this code,        // you will need to do a full restart instead of just a hot reload                // You can't use async/await here, because        // We can't mark this method as async because of the @override        // You could also make and call an async method that does the following        loadAsyncData().then((result) {            // If we need to rebuild the widget with the resulting data,            // make sure to use `setState`            setState(() {                _result = result;            });        });    }
    
    @override
    Widget build(BuildContext context) {
        if (_result == null) {            // This is what we show while we're loading
            return new Container();
        }
        
        // Do something with the `_result`s here
        return new ResultWidget(_result);    }
}

In summary,

Use a StatefulWidget
Make the asyncronous call inside initState
Make sure to call setState with the result, if we need to rerender
Do something meaningful with the results :)

Brian Armstrong