Flutter - FutureBuilder Widget
Last Updated :
07 Jun, 2022
In Flutter, the FutureBuilder Widget is used to create widgets based on the latest snapshot of interaction with a Future. It is necessary for Future to be obtained earlier either through a change of state or change in dependencies. FutureBuilder is a Widget that will help you to execute some asynchronous function and based on that function's result your UI will update.
FutureBuilder is Stateful by nature i.e it maintains its own state as we do in StatefulWidgets.
Syntax:
FutureBuilder(
Key key,
this.future,
this.initialData,
@required this.builder,
)
And, builder should not be null.
When we use the FutureBuilder widget we need to check for future state i.e future is resolved or not and so on. There is various State as follows:
- ConnectionState.none: It means that the future is null and initialData is used as defaultValue.
- ConnectionState.active: It means the future is not null but it is not resolved yet.
- 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.
We will create FutureBuilder Widget in a step by step manner.
Step 1: Create a future that needs to be resolved.
Dart
/// Function that will return a
/// "string" after some time
/// To demonstrate network call
/// delay of [2 seconds] is used
///
/// This function will behave as an
/// asynchronous function
Future<String> getData() {
return Future.delayed(Duration(seconds: 2), () {
return "I am data";
// throw Exception("Custom Error");
});
}
The above snippet is to demonstrate a real network call. We have used a 2 seconds delay.
Step 2: Create a FutureBuilder Widget and manage the waiting state.
Dart
FutureBuilder(
builder: (ctx, snapshot) {
... some code here
// Displaying LoadingSpinner to indicate waiting state
return Center(
child: CircularProgressIndicator(),
);
},
// Future that needs to be resolved
// inorder to display something on the Canvas
future: getData(),
),
In this snippet, we can see we are returning a LoadingSpinner. It will only be displayed when the future is in the Waiting state.
Step 3: Manage Future done state i.e when the future is resolved. This step also requires checking for any error that could occur during a network call.
Dart
FutureBuilder(
builder: (ctx, snapshot) {
// Checking if future is resolved
if (snapshot.connectionState == ConnectionState.done) {
// If we got an error
if (snapshot.hasError) {
return Center(
child: Text(
'${snapshot.error} occurred',
style: TextStyle(fontSize: 18),
),
);
// if we got our data
} else if (snapshot.hasData) {
// Extracting data from snapshot object
final data = snapshot.data as String;
return Center(
child: Text(
'$data',
style: TextStyle(fontSize: 18),
),
);
}
}
... some code here
),
In the above snippet, you can see we are checking
snapshot.hasError
This step is require because it could be possible that future is resolved but an error has occurred.
We are also checking
snapshot.hasData
This step is required because it may be possible that future is resolved but nothing is returned
due to some reasons, so always perform these checks otherwise you may get unexpected behaviour.
Complete Source Code:
Dart
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'GeeksforGeeks',
// to hide debug banner
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.green,
),
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
title: Text('GeeksforGeeks'),
),
body: Center(
child: ElevatedButton(
onPressed: () => Navigator.push(
context,
MaterialPageRoute(
builder: (ctx) => FutureDemoPage(),
),
),
child: Text('Demonstrate FutureBuilder'),
),
),
),
);
}
}
class FutureDemoPage extends StatelessWidget {
/// Function that will return a
/// "string" after some time
/// To demonstrate network call
/// delay of [2 seconds] is used
///
/// This function will behave as an
/// asynchronous function
Future<String> getData() {
return Future.delayed(Duration(seconds: 2), () {
return "I am data";
// throw Exception("Custom Error");
});
}
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
title: Text('Future Demo Page'),
),
body: FutureBuilder(
builder: (ctx, snapshot) {
// Checking if future is resolved or not
if (snapshot.connectionState == ConnectionState.done) {
// If we got an error
if (snapshot.hasError) {
return Center(
child: Text(
'${snapshot.error} occurred',
style: TextStyle(fontSize: 18),
),
);
// if we got our data
} else if (snapshot.hasData) {
// Extracting data from snapshot object
final data = snapshot.data as String;
return Center(
child: Text(
'$data',
style: TextStyle(fontSize: 18),
),
);
}
}
// Displaying LoadingSpinner to indicate waiting state
return Center(
child: CircularProgressIndicator(),
);
},
// Future that needs to be resolved
// inorder to display something on the Canvas
future: getData(),
),
),
);
}
}
Output:
Similar Reads
Flutter - StreamBuilder Widget
A StreamBuilder in Flutter is used to listen to a stream of data and rebuild its widget subtree whenever new data is emitted by the stream. It's commonly used for real-time updates, such as when working with streams of data from network requests, databases, or other asynchronous sources. In this art
5 min read
Flutter - LayoutBuilder Widget
In Flutter, LayoutBuilder Widget is similar to the Builder widget except that the framework calls the builder function at layout time and provides the parent widget's constraints. This is useful when the parent constrains the child's size and doesn't depend on the child's intrinsic size. The LayoutB
3 min read
Flutter - OrientationBuilder Widget
OrientationBuilder is a Flutter widget that allows you to build a widget tree based on the orientation (portrait or landscape) of the device. It's useful when you want to create a different UI layout or make adjustments based on the device's orientation. In this article, we are going to implement th
4 min read
Flutter - GridPaper Widget
A grid paper is a paper that has a grid on it with divisions and subdivisions, for example, graph paper. We may use grid paper in creating the graphs in our flutter application. A sample image is given below to get an idea about what we are going to do in this article. Â How to use it?Dart GridPaper(
3 min read
Flutter - Stepper Widget
In this article, we will learn about the Stepper widget in Flutter. A stepper widget displays progress through a sequence of steps. Stepper is generally used in filling forms online. For example, remember filling an online form for applying to any university or passport or driving license. We filled
8 min read
Flutter - TabView Widget
There are lots of apps where you often have come across tabs. Tabs are a common pattern in the apps. They are situated at top of the app below the App bar. So today we are going to create our own app with tabs. Table of Contents:Project SetupCodeConclusionProject Setup: You can either create a new p
4 min read
Flutter - GestureDetector Widget
A GestureDetector is a very useful Flutter widget that allows you to recognize and respond to various touch gestures, such as taps, swipe, double taps, drags, and more. It provides a way to make your Flutter app interactive and responsive to user input. In this article, we are going to implement and
4 min read
Flutter - Stateful Widget
A Stateful Widget has states in it. To understand a Stateful Widget, you need to have a clear understanding of widgets and state management. A state can be defined as "an imperative changing of the user interface," and a widget is "an immutable description of the part of the user interface". To lear
4 min read
Flutter - TweenAnimationBuilder Widget
In this article, we will learn about how to implement TweenAnimationBuilder Widget. Widget builder that animates a widget's property to a target value whenever the target value changes. A sample video is given below to get an idea about what we are going to do in this article. Constructorconst Tween
3 min read
Flutter - ListTile Widget
The ListTile widget is used to populate a ListView in Flutter. It contains a title as well as leading or trailing icons. Let's understand this with the help of an example.The Constructor of the ListTile classListTile({ Key key, Widget leading, Widget title, Widget subtitle, Widget trailing, bool isT
4 min read