Flutter FutureBuilder | The Right Way

HeyFlutter․com · 37K views · 2022 · 7:02

Open on YouTube

Web developmenttutorial

Why Stack Overflow recommends it

Stack Overflow users link it when explaining that a FutureBuilder's future must not be created inside build, and as a how-to for waiting on async data before rendering a widget.

Recommended by 2 people across 3 different months, 2022 to 2024.

What it is

A short Flutter tutorial by Johannes Milke (HeyFlutter) on using the FutureBuilder widget to show data that arrives asynchronously. It covers how FutureBuilder works, why it keeps re-firing when setState rebuilds the widget, how to refresh it, and how to use ConnectionState.

What people said

Recommends Moaz El-sawaf · 2022-06 · Stack Overflow · on “I am new in flutter firebase. I want to print total value of the field named amount of each firebase document”

The problem is that you are trying to use the output of the function directly inside the `Text` widget while it is taking time to get the value, so you have to wait before rendering the `Text` widget until you get the value. You can use `FutureBuilder` to get the data with a loading and validation logic. Check out this video: [this video]

Recommends MendelG · 2022-07 · Stack Overflow · on “flutter: My list keeps growing when I hot reload or navigate back to that page”

The problem is that getFolders() is called in your build method, so, whenever the build rebuilds itself, more data is added to your list courses . To fix this, create an instance of your Future , and in the initState initialize it. Then, in your FutureBuilder() use the created instance as the future . Here is a simplified example: class MyStatefulWidget extends StatefulWidget { const MyStatefulWidget({Key? key}) : super(key: key); @override State<MyStatefulWidget> createState() => _MyStatefulWidgetState(); } class _MyStatefulWidgetState extends State<MyStatefulWidget> { late Future<List<String>> coursesFuture; Future<List<String>> getCourses() async { await Future.delayed(const Duration(seco

Recommends MendelG · 2023-08 · Stack Overflow · on “using ChangeNotifierProvider with FutureBuilder issue”

The problem I see this problem all the time: Infinite loops in FutureBuilders . In your case, the problem is that when you call. notifyListener() with: user.notifyListeners(); it's going to rebuild the widgets that are listening to the provider , and FutureBuilder is one of the widgets. The Solution The solution is to only fetch the data once - in initState . In your State class, create a nullable variable _fetchUser , and call it in the initState class _Page1State extends State<Page1> with ChangeNotifier { User? _user; Future? _fetchUser; ... @override void initState() { super.initState(); _getAuth(); _fetchUser = context.read<MyUser>().getMyUser(); // Fetch user data here } And in the Futu

Cites Fawaz Joseph · 2022-10 · Stack Overflow · on “What is the recommend practice around StreamProvider create construction and keeping state in Flutter”

So one of the recommended practices for futures and streams is not to create them in a stateless's widget build function because they would be recreated anytime when the build function is called. An example is this video: Flutter Future Builder | The Right way [this video] However, there is the provider's create function, specifically in this context StreamProvider. StreamProvider({ Key? key, required Create<Stream<T>?> create, required T initialData, ErrorBuilder<T>? catchError, UpdateShouldNotify<T>? updateShouldNotify, bool? lazy, TransitionBuilder? builder, Widget? child, }) My question is if I am using the create constructor, can I create the stream for the provider in a stateless widget bui

Cites MendelG · 2024-01 · Stack Overflow · on “Flutter FutureBuilder keeps Firing and rebuilding. It Generates a New Random Number on Every Rebuild - How can I Prevent This?”

Explanation The issue you're experiencing with the FutureBuilder in Flutter is very common. The key point to understand here is that FutureBuilder should be provided with a future that does not change on every build unless you specifically want the asynchronous operation to be re-performed. When you create the future directly inside the FutureBuilder , it is re-created on every build (e.g. every setState ), which is why you are observing the random number changing with every button press. Solution: Using initState to Initialize the Future The solution is to initialize your future once and use this stable reference within FutureBuilder . This is usually achieved by defining the future in the