Flutter's asynchronous UI initializes FutureBuilder

The role of FutureBuilder

FutureBuilder is a Widget in Flutter that is used to build the UI after the asynchronous operation completes. It receives a Future object and builds the UI based on the status of the asynchronous operation, which can display loading indicators, error messages, or data after the asynchronous operation completes.

FutureBuilder constructor definition

The constructor of FutureBuilder is defined as follows:

FutureBuilder<T>(
  { 
    Key? key,
    required Future<T> future,
    T? initialData,
    required AsyncWidgetBuilder<T> builder,
    String? semanticLabel,
    FutureBuilderFallbackBuilder? fallbackBuilder,
  }
)

Among them, the parameters are described as follows:

• key: Key used to identify the Widget.
• future: A Future object representing an asynchronous operation.
• initialData: The initial data before the asynchronous operation completes, or null if not provided.
• builder: An AsyncWidgetBuilder callback function, used to build the UI, and return different Widgets according to the status of the asynchronous operation.
• semanticLabel: A label for assisting accessibility.
• fallbackBuilder: A FutureBuilderFallbackBuilder callback function, used to build the UI, used when the asynchronous operation fails.

Description of the status of an asynchronous operation

In the builder callback function, different Widgets can be returned according to the state of the asynchronous operation. Common states include:

• ConnectionState.none: The asynchronous operation has not started, and a loading indicator or other prompt information can be displayed.
• ConnectionState.waiting: The asynchronous operation is in progress, and a loading indicator or other prompt information can be displayed.
• ConnectionState.active: The asynchronous operation is in progress, similar to the waiting state, but can provide a Future object to cancel the operation.
• ConnectionState.done: The asynchronous operation has been completed, and the UI can be built according to the result of the asynchronous operation.

for example

Here's a simple example that uses a FutureBuilder to display the result of an asynchronous operation:

FutureBuilder<String>(
  future: _getData(),
  builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return CircularProgressIndicator();
    } else if (snapshot.hasError) {
      return Text('Error: ${snapshot.error}');
    } else {
      return Text('Result: ${snapshot.data}');
    }
  },
)

In this example, _getData() is an asynchronous operation that returns a string. In the builder callback function, different Widgets are returned according to the status of the asynchronous operation. If the connection status is waiting, display a CircularProgressIndicator loading indicator; if an error occurs, display the error message; otherwise display the result of the asynchronous operation.

It should be noted that FutureBuilder will only perform asynchronous operations on the first build. If you need to rebuild the UI after the asynchronous operation is completed, you need to use the setState() method to trigger the reconstruction of the UI.

If the asynchronous operation needs to pass parameters, you can use the future parameter passing of FutureBuilder. If you need to update the state of the StatefulWidget after the asynchronous operation is completed, you can use the setState() method in the builder callback function to update the state.

Summarize

FutureBuilder is a very useful Widget in Flutter that can help us handle asynchronous operations and build UIs based on their state. When using FutureBuilder, you need to pay attention to the state of the asynchronous operation, return different Widgets, and use the setState() method to rebuild the UI when needed.