In Flutter, FutureBuilder is a widget that responds to changes in state or dependencies by building itself based on the most recent snapshot of a Future. With FutureBuilder, we can run asynchronous functions and update our UI based on the function’s output.
FutureBuilder({Key? key,Future<T>? future,T? initialData,required AsyncWidgetBuilder<T> builder,})
Note: The
buildermust not be null.
key: This property controls how another replaces one widget.future: This property represents the Future whose snapshot can be accessed by the builder function.initialData: This property represents the data that will be utilized to build the snapshots until a non-null Future has been completed.builder: This property represents the current build strategy.The following are the states used to determine the future’s current state when using a FutureBuilder widget:
ConnectionState.none: This indicates that initialData is being utilized as the defaultValue and that the future is null.
ConnectionState.active: This indicates that although the future is not null, it has not yet been resolved.
ConnectionState.waiting: This state indicates that the future is currently being resolved, and we’ll receive the outcome shortly.
ConnectionState.done: This denotes the completion of the future.
The following code shows how to use a FutureBuilder.
import 'package:flutter/material.dart';
void main() {
runApp(const MaterialApp(home: HomePage()));
}
class HomePage extends StatelessWidget {
const HomePage({Key key}) : super(key: key);
Future<String> getWriterName() {
return Future.delayed(const Duration(seconds: 3), () => "Maria Elijah");
}
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
backgroundColor: Colors.deepPurpleAccent,
title: const Text('Flutter FutureBuilder'),
),
body: SizedBox(
width: double.infinity,
child: Center(
child: FutureBuilder(
future: getWriterName(),
initialData: "Code sample",
builder: (BuildContext context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return const Center(
child: CircularProgressIndicator(
color: Colors.deepPurpleAccent,
),
);
}
if (snapshot.connectionState == ConnectionState.done) {
if (snapshot.hasError) {
return Center(
child: Text(
'An ${snapshot.error} occurred',
style: const TextStyle(fontSize: 18, color: Colors.red),
),
);
} else if (snapshot.hasData) {
final data = snapshot.data;
return Center(
child: Text(
data,
style: const TextStyle(
fontSize: 20, fontWeight: FontWeight.bold),
),
);
}
}
return const Center(
child: CircularProgressIndicator(),
);
},
),
),
),
));
}
}
Let’s explain the code above:
getWriterName function that returns a writer’s Future name after three seconds of delay. It simulates an asynchronous operation using the Future.delayed constructor.build method of a widget that returns a SafeArea widget with a Scaffold as its child. The Scaffold contains an AppBar widget with a purple accent background color and a centered title displaying Flutter FutureBuilder.Scaffold widget; we use a SizedBox and Center widget to contain a FutureBuilder that monitors a Future. The FutureBuilder displays a CircularProgressIndicator while the Future is running and shows the result in a Text widget if it completes successfully. If the Future completes with an error, an error message is displayed in a Text widget.Free Resources