When to use a FutureBuilder?

When to use a FutureBuilder?

FutureBuilder 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.

Tasks for FutureBuilder:

• Give the async task in the future of Future Builder
• Based on connectionState, show message (loading, active(streams), done)
• Based on data(snapshot.hasError) show view

Pros of FutureBuilder

• No two flags and no setState
• Reactive programming FutureBuilder will take care of updating the view on data arrival.

Example:

FutureBuilder<String>(
        future: _fetchNetworkCall, // async work
        builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
           switch (snapshot.connectionState) {
             case ConnectionState.waiting: return Text('Loading....');
             default:
               if (snapshot.hasError)
                  return Text('Error: ${snapshot.error}');
               else
              return Text('Result: ${snapshot.data}');
            }
         },
        )

Performance Impact:

• FutureBuilder is just a StatefulWidget whose state variable is _snapshot
• Intial state is _snapshot = AsyncSnapshot<T>.withData(ConnectionState.none, widget.initialData);
• It is subscribing to the future which we send in constructor and updating the state based on that.

  widget.future.then<void>((T data) {
        if (_activeCallbackIdentity == callbackIdentity) {
      setState(() {
        _snapshot = AsyncSnapshot<T>.withData(ConnectionState.done, data);
       });
     }
    }, onError: (Object error) {
    if (_activeCallbackIdentity == callbackIdentity) {
      setState(() {
        _snapshot = AsyncSnapshot<T>.withError(ConnectionState.done, error);
      });
     }

  In future builders, 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:

• connectionState.none = In this state future is null
• connectionState.waiting = [future] is not null, but has not yet completed
• 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 set to true.

Conclusion:

In this article, we have been through about What is FutureBuilder and When to use FutureBuilder?

Thanks for being with us!!!
Keep Learning, Keep Fluttering !!!

Do let us know if you need any assistance with Flutter Development.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.