Builder (Flutter Widget of the Week)

Flutter · 152K views · 2020 · 1:41

Open on YouTube

Software architecture & designWeb developmentexplainer

Why Stack Overflow recommends it

Stack Overflow users link it when answering Flutter errors like Scaffold.of(), Navigator or Provider lookups failing because the BuildContext sits above the widget being searched for.

Recommended by 4 people across 4 different months, 2020 to 2023.

What it is

A 1m41s Flutter Widget of the Week episode from the official Flutter channel explaining the Builder widget. It shows how Builder hands a child a fresh BuildContext so it can reach inherited widgets, such as a Scaffold, defined in the same build method.

What people said

Recommends Philip Dolenko · 2020-05 · Stack Overflow · on “How to add bottomsheet?”

move your Scaffold body to separate stateless widget or use Builder see that video to understand why it's happening [this video]

Recommends Albert221 · 2022-06 · Stack Overflow · on “How to track the opening of a hamburger menu and assign a value to a variable when the menu opens?”

The context you are passing to Scaffold.of does not have the Scaffold 's inherited widget. As you can see, this context that you pass comes from your build method arguments, or some other widget builder above your Scaffold . You can get your hands on a BuildContext containing your Scaffold though. You may do it in two ways: Use Builder widget under the Scaffold . This widget simply gives you a callback with a fresh BuildContext containing all of the inherited widgets above this Builder . Here's Flutter Widget of the Week on Builder [this video] . Pass GlobalKey to your Scaffold and use its state for invoking the openEndDrawer method. Simply instantiate a GlobalKey<ScaffoldState> in your widget (i

Recommends MendelG · 2022-07 · Stack Overflow · on “How can I resolve this Flutter Navigator.push() error?”

EDIT : Duplicate of: Navigator operation requested with a context that does not include a Navigator [LINK] The problem is with the context . To fix this. Wrap your widget in a Builder() [LINK] Class: import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatefulWidget { const MyApp({Key? key}) : super(key: key); @override State<MyApp> createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { int count = 0; @override Widget build(BuildContext context) { return MaterialApp( home: Builder(builder: (context) { return Scaffold( appBar: AppBar( backgroundColor: Colors.deepOrange, title: const Text("Noice!"), ), body: ElevatedButton( chi

Recommends venir · 2023-08 · Stack Overflow · on “Rebuilding ConsumerWidget on changes to nested provider”

First, by reading your business logic (to which I'm basically unaware of) it's weird to see that bankrollListControllerProvider and bankrollTotalProvider are unrelated. I would expected a reactive dependency, such that bankrollTotalProvider watches bankrollListControllerProvider to compute its thing. But I see that's not the case. Anyways... The problem I'm facing is when bankrollTotalProvider changes, it doesn't invoke the build method of the BankrollListScreen as it’s only being watched by bankrollListControllerProvider . Something's wrong here. I'd suggest giving your list elements a key (e.g. based on bankroll.id ) so that you can better debug why and how those elements are replaced by t

Cites dumazy · 2020-04 · Stack Overflow · on “How do I dismiss an Alert Dialog in Flutter?”

I assume you are using the wrong context object when calling Navigator.pop(context) . At that point the Navigator isn't aware of the dialog yet. First, provide a new BuildContext within showDialog . There are two ways to do that: Create a new widget for the child parameter (now Dialog ) in the showDialog function. Wrap the child ( Dialog ) with a Builder [LINK] that provides a new BuildContext Then you should get that new context to the Navigator.pop(context) call. Again, there are two ways to do that: Pop from within the dialog itself Pass the context object along as a parameter to the onTapPositiveButton and onTapNegativeButton More info on the Builder can be found here as well: [this video]

Cites Leo Letto · 2020-06 · Stack Overflow · on “About errors that occur in flutter's provider”

In your first example, NewWidget is build with a new BuildContext , that already have access to it's ancestor, so this Widget can see the provider that you have created there with: context.read<Model>() . But, on your second example, you are creating and using your provider all in the same Widget Main so everything on the same BuildContext , and when you run context.read<Model>() flutter will try to look up in your Widget tree to find the Model , but it won't find it because you have just created it. That's a scenario where you could make use, of the Builder [this video] Widget: class Main extends StatelessWidget { @override Widget build(BuildContext context) { return ChangeNotifierProvider( crea

Cites Leo Letto · 2020-06 · Stack Overflow · on “Inside of MatterialApp. MediaQuery.of() called with a context that does not contain a MediaQuery”

If you take a look better in your code, you will see that your build method is called with a context and by the time of that call, there isn't any previous Widget, which mean that your MaterialApp doesn't exist yet when your build is called, so that BuildContext doesn't have any previous MaterialApp, you can solve this just by splitting your code like this: class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Home(), title: "Ali Azad", ); } } // This Home Widget will be a child of MaterialApp, and the BuildContext has access to this Material widget. class Home extends StatelessWidget{ @override Widget build(BuildContext context){ retu

Cites Allaw Hussein · 2023-03 · Stack Overflow · on “Why flutter doesn't pass a new context to predefined widgets? (thus required a Builder widget in some .of() usages)”

I'm checking the official documentation [LINK] and the official YouTube video [this video] for Builder widget. In the docs the following example fails Widget build(BuildContext context) { return Scaffold( body: Center( child: TextButton( onPressed: () { // Fails because Scaffold.of() doesn't find anything // above this widget's context. print(Scaffold.of(context).hasAppBar); }, child: const Text('hasAppBar'), ) ), ); } I know why this particular example fails, since the context used in print(Scaffold.of(context).hasAppBar); doesn't contain the Scaffold. The question is why flutter doesn't pass automatically a new context for the Center or TextButton widgets as it does with user-defined classes? A