FutureBuilder In Flutter

In Flutter, widgets are made based on the most recent snapshot of interaction with a future using the FutureBuilder Widget. Future must be acquired earlier, either by a change in state or a shift in dependents. A widget called FutureBuilder will assist you in running some asynchronous functions and updating your user interface in response to the results of those functions.

FutureBuilder is Stateful by nature, meaning it keeps track of its own state just like StatefulWidgets do.

FutureBuilder(
  Key key,
  this.future,
  this.initialData,
  @required this.builder,
)
//builder should not be null.

While using the FutureBuilder widget, we must determine the future state, such as whether or not the future has been resolved. Several States include the following:

• ConnectionState.none: InitialData is utilised as the defaultValue and the future is considered to be null.
• ConnectionState.active: It implies that although the future is not decided yet, it is not null.
• ConnectionState.waiting: It means the future is being resolved, and we will get the result soon enough.
• ConnectionState.done: It means that the future has been resolved

Step 1: Create a future that needs to be resolved.

Future<String> getData() {
  return Future.delayed(Duration(seconds: 2), () {
    return "hello";
  });
}

To illustrate a network call, look at the example above. We have used a 2 seconds delay.Function that will return a “string” after some time.This function will behave as an asynchronous function

Step 2: Create a FutureBuilder Widget and handle the waiting state.

FutureBuilder(
  builder: (ctx, snapshot) {      
    // Showing Loader to indicate waiting state
    return Center(
      child: CircularProgressIndicator(),
    );
  },
  future: getData(),
),

We can see that we are returning a Loader in this example. Only when the future is in the Waiting state will it be seen.

Step 3: Handle the future’s done state, or the moment it is settled. In this phase, it’s also important to look for any errors that might happen during a network call.

FutureBuilder(
  builder: (ctx, snapshot) {
    // making sure the future is resolved
    if (snapshot.connectionState == ConnectionState.done) {
      // If any error occurs
      if (snapshot.hasError) {
        return Center(
          child: Text(
            '${snapshot.error} occurred',
          ),
        );
         
      } else if (snapshot.hasData) {
        // Data extraction from a snapshot objec
        final data = snapshot.data as String;
        return Center(
          child: Text(
            '$data',
          ),
        );
      }
    }
      ),

snapshot.hasError

This step is necessary since it’s possible that even if the problem is corrected in the future, an error still exists.

snapshot.hasData

This step is necessary because it’s possible that the future may be resolved but nothing will be returned for various reasons. As a result, you should always carry out these checks to avoid encountering unexpected behaviour.