FutureBuilder (Widget of the Week)

Flutter · 109K views · 2022 · 1:30

Open on YouTube

Software (other)Web developmentexplainer

Why Stack Overflow recommends it

Stack Overflow users link it when answering Flutter questions about showing async data in the UI and about not creating the Future inside the build method.

Recommended by 4 people across 5 different months, 2022 to 2024.

What it is

A 90-second entry in the Flutter team's Widget of the Week series explaining FutureBuilder, a widget that builds UI from the state of a Future and rebuilds when it completes. It is presented by the official Flutter channel with a DartPad example.

What people said

Recommends user11756851 · 2023-07 · Stack Overflow · on “How to update the list when I click the button in flutter?”

try and reorganize the way you initialize the app, using the future builder like this and creating the future in itself is an error, start by working this out before moving to your described bug, see the flutter youtube channel on this take [this video] //Dont to FutureBuilder<List<dynamic>>( future: fetchData(),

Recommends pskink · 2023-09 · Stack Overflow · on “Flutter: Null check returns an exception for a second”

dont do things like `future: futureMethod()` read the second paragraph of official docs for more info: [LINK] or watch this short vid: [this video]

Recommends Dhafin Rayhan · 2023-11 · Stack Overflow · on “How make sure that an asynchronous data fetching method has completed before build method is called?”

You can't make the build method waits for a future to complete, but instead you should show an alternative widget when the future has not completed yet. You can do this with FutureBuilder [LINK] . Here's an example: class FutureBuilderExample extends StatefulWidget { const FutureBuilderExample({super.key}); @override State<FutureBuilderExample> createState() => _FutureBuilderExampleState(); } class _FutureBuilderExampleState extends State<FutureBuilderExample> { final Future<String> _calculation = Future<String>.delayed( const Duration(seconds: 2), () => 'Data Loaded', ); @override Widget build(BuildContext context) { return FutureBuilder<String>( future: _calculation, // a previously-obtain

Recommends Dhafin Rayhan · 2024-01 · Stack Overflow · on “Flutter Opening they keyboard causes widget to rebuild”

Widget rebuild is expected as the screen size changes when you open the keyboard, so you should not prevent that. But instead, you should make the stream a variable in your state and initialize it inside initState : class _CommentPageState extends State<CommentPage> { late Stream<QuerySnapshot> _commentStream; // ... @override void initState() { // ... _commentStream = _getCommentStream(); } and then you can use it like this: child: StreamBuilder<QuerySnapshot>( stream: _commentStream, // ... ) This way, _getCommentStream() won't get called again when the widget rebuilds. This problem is addressed in Flutter's Widget of the Week video of FutureBuilder [this video] (and that's why they had to do a

Recommends Chathura Chamikara · 2024-09 · Stack Overflow · on “Getting a list element value in Flutter/Dart”

You don't need to call the 'loadTableData()' within the build method. You can use a widget like 'FutureBuilder' for that. [this video]

Cites Marcos Vinícius · 2022-12 · Stack Overflow · on “How to implement progressindicator within a alertdialog in flutter?”

Since you're new to Flutter, i tried to make it simplest as possible, you just have to adapt it to your situation. If we're awaiting for some value to load our screen, it's clever to use the FutureBuilder, since it's made for it: The showDialog method: Future<void> showCustomDialog() async { return await showDialog( context: context, barrierDismissible: false, // barrierDismissible: true or false, if you want to your dialog be closed in case your user clicks outside of it. builder: (context) { return AlertDialog( shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)), backgroundColor: const Color.fromRGBO(0, 0, 0, 1), //Your Theme. title: const Text( 'Your title', style: Text

Cites deczaloth · 2023-01 · Stack Overflow · on “Flutter Future Issues causing The argument type 'Future<List<Widget>>' can't be assigned to the parameter type 'List<Widget>' error”

Instead of returning the ListView you have to return the FutureBuilder so Future<List<Widget>> items = []; @override void initState() { items = getRecordedItems(); // future is created just once, here! super.initState(); } ... // somewhere further down in your build method: return FutureBuilder<List<Widget>>( future: items, // do not create the future here! builder: (context, snapshot) { if (snapshot.connectionState == ConnectionState.done) { List<Widget> items = snapshot.data ?? []; return ListView(children: items); } else { // if not yet done, return a progress indicator! return CircularProgressIndicator(); } }), Take special care of not creating the future in future: parameter, otherwise

Cites Frank van Puffelen · 2023-10 · Stack Overflow · on “Firebase UserEmail all the time verified”

Your reload is an asynchronous method that returns Future<bool> . That means that reload(user) == true should not even compile in this code: home: user != null && reload(user) == true ? const HomePage() : LoginPage()); If you want to use a Future while building a UI, you need to use a FutureBuilder [this video] .