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.
