A guide to Inherited Widgets - Flutter Widgets 101 Ep. 3

FILIP HRACEK: Oh, hi.

I'm Filip from the Flutter team, and this is the third video

in Flutter Widgets 101.

Previously, you learned about stateless and stateful widgets.

In this video, I'll be talking about InheritedWidget.

When your app gets larger and your widget tree

gets more complex, passing and accessing data

can get cumbersome.

If you have four or five widgets nested one after the other

and there is a piece of data you need to get from the top

to the bottom, you're adding it to all those constructors

and all those build methods.

Ugh.

I just want to reach up the tree to get that data.

Fortunately, there's a widget type that allows just that.

It's called InheritedWidget.

When you put this widget in your tree,

you can get a reference to it from any widget below it.

This is why we call it an InheritedWidget.

Think about a family tree.

For example, I inherited my big nose

from both my dad and my grandfather.

They're both above me in the family tree,

so I can inherit from them.

So to be clear, this is not inherited

as in a class hierarchy but inherited

as in a widget hierarchy.

Let's see how we would implement one of those inherited widgets.

We'll create a class called inherited notes that

extends InheritedWidget.

We need our widget to accept at least one parameter,

and that's the child.

This is already a valid InheritedWidget,

but it's useless.

Let's give it a nose.

In this case, the nose will be an image asset of a nose.

We'll just add that as a field of the InheritedWidget.

Now any descendant of our inherited nose

can get access to it in its build method