What is the purpose of child in Consumer Provider Flutter

Question

I have a question about Consumer, of Provider package, in Flutter. I don't understand the purpose of argument "child" in the builder of Consumer

Consumer<MyModel>(builder: (context, myModel, child) {
// doing stuff using myModel variable
});

I could not find any doc about it.

Solution 1

The child is any widget that doesn't need the data inside of the provider, so when the data gets updated, they don't get re-created since they don't need the data, rather they are passed as a reference to the builder.

    Consumer(
       builder: (context, myModel, child) {
       // child will refer to the MaterialButton provided as the child argument in the 
       // Consumer named parameter,
       // doing stuff using myModel variable
       }
       child: MaterialButton( 
              child: Text("Do some action"), 
              onPressed: () {
              // do some actions
    },),);

Since the MaterialButton doesn't need the state of the provider, but its in the descendant tree, there is no need to re-render that, so it gets passed back to the builder, to save memory and increase performance

Solution 2

You can pass child widget in consumer. What ever widget you pass as a child will not rebuild when data is changed.

You can avoid unnecessary rebuild of widget using child.

Comments

[Chinky Sight]

But, how this will layout on-screen ? will it be horizontal or vertical or more .... we are returning a widget to the builder and return a widget to the child so how flutter will layout them?

[Chinky Sight]

But, how this will layout on-screen ? will it be horizontal or vertical or more .... we are returning a widget to the builder and return a widget to the child so how flutter will layout them?

[Viren V Varasadiya]

you will get the same behaviour of child widget if you pasted code inside it self. @ChinkySight

[Chinky Sight]

Another question here: I have a widget tree which consists of Scaffold, AppBar, and a Column. The Column has three widgets: Text, Future Builder, Flat Button. I want to rebuild everything(AppBar, Column ..) when the state of the provider changes, except the Future Builder(else it will perform unnecessary read).

[Viren V Varasadiya]

then you must wrap consumer above scaffold and assign future builder to child and use child where ever you want to use in your case between text and flat button.

[Osama Abdullah]

its optional , if you need it you display it, else you can omit the child

[Chinky Sight]

Now I got it, how the child works thank you very much :D

[MobileMon]

@ChinkySight i have the same question. I think the answer is that it first tries to use builder widget but if no builder widget is there, then it falls back to child?

[Chinky Sight]

@MobileMon It's not like that, as we know we can use Provider for both dependency injection and state management. If the Consumer is of type ChangeNotifierProvider and we don't a specific widget to rebuild when notifyListener() is called then we can we use the child property.

[Paras Arora]

is this returing the same instance of a Material button from the cache?