Making Future calls in Flutter – FutureBuilder Widget

Flutter provides a very easy way to wait for future method calls. Future calls are nothing but asynchronous method calls, that wait for one method to complete before proceeding with the next.

This is particularly helpful when there are network-related requests that are performed in the Flutter application.

Since there will always be some form of delay in receiving some data over the network, Future calls are preferred.

The best example to demonstrate the need for a Future method call is fetching data from a DB over a remote server.

There will always be a delay that is associated with this operation. The user, on the other hand, should also be notified to wait for the application to load some data.

All of this is possible through the FutureBuilder widget that Flutter provides. If you are new to Flutter programming and want to learn the Flutter Basics in 1 hour, make sure to read that and jump in here for better and faster understanding.

FutureBuilder Widget – Basics

The FutureBuilder Widget is helpful to create a simple/even complex delays by the Flutter Application.

It provides a simple interface to load data and at the same time perform some action while the data is still loading.

This could be some form of UI message for the user to wait or even some other action to be performed by the time the data finishes loading.

In order to create the FutureBuilder widget, make use of the following constructor call,

FutureBuilder()

The FutureBuilder widget is going to have a lot of attributes that have to be filled up in order to provide the data to be loaded and the action to be performed while this data loads.

FutureBuilder – Important Properties

This section will list out all the important properties that have to be used to create the Future method call action. 

future – Beginning with this attribute here, it takes the Future/async operating method as its value.

To know more about what async methods are, read more about this here. The primary use of the async method is to indicate that, the data will not be returned immediately rather there is no fixed time frame for the data to be returned at all.

builder  – The important attribute that takes in 2 important parameters, context, and snapshot.

Remember the future attribute we saw above, whatever data that the future attribute returns, it is stored in the snapshot parameter.

All you have to do to access is call the snapshot.data and the data is easily accessed.

initialData – Additionally the future builder widget can also be loaded with a simple initial data value.

This data is shown to the user until the future attribute returns with some value.

Note: Apart from the above available attributes, the builder function should always return a widget. This is a mandatory parameter.

FutureBuilder Example Application 

The below application, tries to mimic the use of the Future call and loads the data through the FutureBuilder widget.

Run this application through your IDE to see the result for yourself.

import 'dart:async';
import 'package:flutter/material.dart';
void main() => runApp(FutureBuilderApp());

class FutureBuilderApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Sample Divider Widget',
home: FutureBuilderWidget(),
);
}
}

class FutureBuilderWidget extends StatefulWidget {
FutureBuilderWidget({Key key}) : super(key: key);

@override
_FutureBuilderWidgetState createState() => _FutureBuilderWidgetState();
}

Future getDataFromFuture()
async {
return new Future.delayed(const Duration(seconds: 1), ()=>"Wait is over!");
}

class _FutureBuilderWidgetState extends State {

@override
void initState() {
super.initState();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Sample FutureBuilder Widget"),
backgroundColor: Colors.black45,),
body: Center(
child:Column(
children: [
Container(child: Image.network(
"https://franklinchristianchurch.com/wp-content/uploads/2017/11/Waiting_web.jpg"),),
FutureBuilder(
future: getDataFromFuture(),
builder: (context, snapshot){
if(snapshot.data != null)
{
return Center(child: Text(snapshot.data, style: TextStyle(color: Colors.red, fontSize: 40.0, fontWeight: FontWeight.bold),),);
}
return CircularProgressIndicator();
})
],
),
)
);
}
}

FutureBuilder – Conclusion

The widget is very important to handle asynchronous calls without losing any data.

A lot of times, when working with internet and database, data will never be loaded in real-time.

Instead, the data will be loaded some random time in the future. This widget handles it with ease, make sure to use it wisely and carefully!

Add a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.