AsyncBuilder and AsyncStatelessComponent

The AsyncBuilder and AsyncStatelessComponents are special server-side components that can have an async build method that lets you do any asynchronous work before rendering the component.

Typically during pre-rendering, you have some additional data you want to load and display as part of the pre-rendered html. If this data is loaded asynchronously (e.g. from a database, network request etc.) you need to delay the build phase until all data is loaded.

Usage

The async components allow you to put your data-loading logic directly into the build method.

• The AsyncBuilder component takes an async builder: Stream<Component> Function(BuildContext context) parameter.
• The AsyncStatelessComponent has an abstract Stream<Component> build(BuildContext context) method.

Both methods are designed to resemble an async variant of the standard Iterable<Component> Function(BuildContext context) build method. Similarly, it is supposed to be used with the async* / yield syntax:

class MyAsyncComponent extends AsyncStatelessComponent {

  @override
  Stream<Component> build(BuildContext context) async* {
    // Simply use "await" inside the build method.
    var data = await loadDataFromDatabase();

    // Renders the component after the data has loaded.
    yield MyOtherComponent(data: data);
  }
}

or using the AsyncBuilder component:

yield AsyncBuilder(builder: (context) async* {
  // Simply use "await" inside the build method.
  var data = await loadDataFromDatabase();

  // Renders the component after the data has loaded.
  yield MyOtherComponent(data: data);
});

When using these components and performing async work, the pre-rendering of the whole page will be delayed until all async work is done. While this is less of a concern in static mode, be aware that in server mode this can potentially affect the load time of your website.

Alternatives

• Check out the PreloadStateMixin for an alternative way to load async data on the server as part of a StatefulComponent.