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
by calling context dot InheritWidget of exact type.
By calling this method with a type of your custom
InheritedWidget, you tell Flutter
to go up the tree, starting from the build context
and look for a widget that matches that type.
But to make things simpler and more readable,
InheritedWidgets often include a static method called of,
which calls the InheritWidget of exact type method for you.
Now we can rewrite our code in the descendant
to read InheritedNose dot of context, and that's nice.
If this of complex business seems familiar,
that's because it is used by the Flutter framework itself.
For example, you may know that the way to get
the global theme of a material app,
you do theme dot of context.
Theme is in fact a type of InheritedWidget.
So is Scaffold, Focus Scope, and many others.
One thing about the InheritedWidget
is that it is immutable.
That is why our image asset is smart as final.
You can only replace an InheritedWidget's field
by rebuilding the whole widget.
Keep that in mind.
Many InheritedWidgets will stay unchanged
for the whole lifecycle of the app, and that's OK.
But the fact that something is final
only means it can't be reassigned.
It does not mean it cannot change internally.
For example, instead of a value, you can attach a service object
to the InheritedWidget.
It can be a wrapper around your database,
a proxy for your web API, or a provider of assets.
The service object can have its own internal state.
It can initiate network calls, anything.
In our case, no service will provide
various nose-related services.
Each descendant of the InheritedNose widget
can easily get hold of the service
through InheritedNose dot of context.
It can call methods on it--
[NOSE BLOWS]
Subscribe to streams--
[SNEEZES]
And so on.
To summarize, InheritedWidget is very neat.
It lets you access state from way above in the tree.
So in the past three episodes, we've
covered three really useful widgets--
stateless, stateful, and inherited.
Next time, we're going to talk about something very different
but equally important--
keys.
Also be sure to head to flutter.io
to see all of our widgets.