A guide to Inherited Widgets - Flutter Widgets 101 Ep. 3
HTML-код
- Опубликовано: 30 июл 2024
- In the previous episodes, we have covered stateless widget and stateful widget. In this video Filip Hracek will be introducing inherited widgets, what it is for, how to use it, and some sample cases.
Watch other episodes in the series → bit.ly/FlutterWidgets101
Stay tuned and subscribe for latest releases → bit.ly/googledevs 
Наука
I want this level of calmness in my life.
Yeah he seems to get the concepts 🙌
Just for those who need that little bit of extra information:
You create the subclass of the InheritedWidget (as explained in the video) and that subclass has a constructor that takes a widget as a child. The idea is to (in the build method of your app) wrap your top widget in there and put your Inheritedwidget on the top. That way the InheritedWidget is very much on the top and accessible by everyone. (I know it is obvious...once you figure it out). Hope this saves someone some time ;)
Is it like React's context api where you have a Context Provider at the top of your tree?
thanks a lot!!!
thanks
This is crucial. It should've been mentioned in the video. Thanks!
@@Imp0ssibleBG yeah.
for those who will look this video in 2020 - method context.inheritFromWidgetOfExactType(InheritedNose) is deprecated, use context.dependOnInheritedWidgetOfExactType(),
ok, google, are you going to update videos about your framework :) ?
Fantastic video! I can't imagine how many takes that must have required.
I liked the part of service so much, so inspiring with these sounds in background.
"Interview question". I remember it was one of them. Nicely explained!
NOSEly explained! :D
Great short videos from the flutter team !!! Keep them coming !!!
😂😂😂 this guy is awesome
His nose as well.
Thumbs up for Example :)
Thumbs up into the big nose !
Very nice, this guy is like a Temple. Focused, calm ( not so enthusiastic voice ). I like it :D
Nice guy! Thanks for explanation, was really helpful 👍
Wow! Perfect. Creative and fun example. It always will be kept on my mind. :D
After a year of studying flutter I finally understood this concept.
I thought only I am these much slow.
Nice. If this man has a youtube channel, im subscribing.
When you want to grow up your size of project, you must be annoying of a a lot of different widget dependency. What a good flutter team! has provided a bloc pattern support inside of flutter. You don't need to npm / yarn install something and write a lot of coding (compare with redux). I think bloc pattern is the best solution for handling dependency between widget.
Hahah, love the sound effects!
There's a mistake in the video at 2:35 - the nose object was supposed to be assigned from the asset member of inheritedNose - so the code should read final nose = InheritedNose.of(context).asset;
I think it's not wrong. I guess it changed later.
@@deeprock2 You're wrong and so is the video. At 2:01 the code reads
final nose = context.inheritFromWidgetOfExactType(InheritedNose).asset;
so the code at 2:35 should read
final nose = InheritedNose.of(context).asset;
Lol... Good one ! The video is both funny and educational. The sound effect made me laugh 4:06 made me laugh
Haha! I like the nose example very much XD Finally I can understand InheritedWidget by this video, thanks!
Awesome and hilarious ! Great video.
Thank you, it's awesome!
Amazing series XD
I think some of the syntax is now outdated; correct me if I'm wrong.
(I'm using Flutter 2.0.3)
inheritFromWidgetOfExactType is deprecated since v1.12.1, use dependOnInheritedWidgetOfExactType instead.
I could pick that widget... but not in public.
that's a private function()
Just started looking into flutter. This is good explanation, but the video needs to be updated. Better yet... perhaps link to some sample code in the video notes.
Very informative video! Thanks Flutter Team 🙏
A quick question, in order to get the asset variable in the build() method:
final nose = InheritedNose.of(context);
shouldn't the asset be returned from the of() method such as:
static InheritedNode of(BuildContext context) =>
context.inheritFromWidgetFromExactType(InheritedNose).asset;
`nose` is the object reference, not the `asset` reference.
If you want the `noseAsset`, that would be:
final noseAsset = InheritedNose.of(context).asset;
great explaination
Thank you!
Thank's God, now I got it! Thank's for the explanation!
i liked last part of the video :D
At 1:53, I am having error in the line final nose = ... at the word asset.
However using it InheritedNose.of(context).asset seems to work.
Edit: I had to use
(context.inheritFromWidgetOfExactType(InheritedNose) as InheritedNose).asset
Well spotted! Thanks for the correction.
For additional clarification: most developers will end up using the .of() way, which means they won't encounter the problem shown by Aryan. Because:
static InheritedNose of(BuildContext context) => context.inheritFromWidgetOfExactType(InheritedNose);
has the cast implicit in the signature of the static method. After this, InheritedNose.of(context).asset just works.
pls make a video about context
This guy example is just perfect
nice and useful widget
Thanks a lot ❤
informative tutorial on inheritedWidgets. However, which stage can it be used in building an eCommerce app? Kindly give instance. thanks
Our shopping sample app uses an InheritedWidget called ScopedModel to hold the shopping cart: github.com/flutter/samples/blob/master/shrine/lib/main.dart. That's one way to approach it.
@@redbrogdon Broken link 😔
how do i put the stateless widget up the tree? do i have to?
does final nose = InheritedNose.of(context); really work? Don't we need some .nose?
InheritedNose.of(context).nose
Hey, we need that cool grey Google Bike T-shirt in the Google Merchandise Store! It's currently not available in all sizes. Please make it available!
ThankU
clear and fun :)
Can a child widget (eg: main app) inherit from 2 separate inherited widgets? Like I need one inherited widget for translation and another for navigation. They work fine separately but unable to make them work together... :(
As far as I know flutter (actually dart) doesn't support multiple inheritance.
Quality content
This is why we have to know a lot about a trees for the Google Interview.
How about putting the "Flutter Widgets 101" into a playlist?
Hi Robert! You can find all the Widget of the Week videos in this playlist → ruclips.net/p/PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG
What is the meaning of it ?
Old school singleton or class with static members will do the same without need of context tree lookup.
Did I miss something?
This did not cover how to set the Inherited State data! How are you setting NoseService ?
Ah! Never mind... just found out - you create the context as the root of the widget tree. Example: github.com/iampawan/StateExperiments/blob/d98a58df032b56ee72c46145c5e7d2bce5026ab2/lib/main.dart#L37
At 02:00 should be now like this : final nose =
context.dependOnInheritedWidgetOfExactType().asset;
Finally a tutorial that KNOWS what it's talking about
what if I have a scenario something like this from my first Screen I pass a boolean variable to my second screen in the constructor and when I modify it in my second screen I want it to get updated in my first Screen,How can I achieve this ?
Yes, if you pass a raw boolean variable to the constructor, that doesn't give you any way to update the parent (or any other screen). Changing that variable will just change it in that widget, nothing else.
You need to wrap the boolean in something called an "observable" -- some class that doesn't only hold the value, but also allows others to "observe" it. The lowest level class that does this in Flutter is called ChangeNotifier (that's what it does: it notifies whoever is listening that some value has changed).
This is just something inherent to developing in a declarative framework. It's hard to grok at first but then becomes second nature.
I wrote an introduction to this over here: flutter.dev/docs/development/data-and-backend/state-mgmt/intro. Hope that helps.
@@filiphracek thank you very much I will surely take a look
Is this like React's context api where you have a Context Provider at the top of your tree? (I am coming from a web dev background and I am confused)
Flutter uses BuildContext (or just "context") to mean the place in the tree where a widget is being placed. If you put a StatelessWidget into a Row, for example, that Row is the context passed into the StatelessWidget's build method. It's used with inherited widget as a way of saying "Start and this point in the tree and go up until you find a widget that matches what I'm looking for."
@@andrewbrogdon558 Why didn't you say THIS in the video!!!!?
@@JohanHartzenberg cuz he wasn't in the video
@@JohanHartzenberg Filip did say something similar
This means that the method inheritFromWidgetOfExactType is O(n) because it hast to search for the widget of that type, am I right?
Good question!
Yes and no. It would potentially need to search every ancestor element to find the right widget, so O(n) where n is the height of the tree above the context. However, Flutter is crafty enough to cache the inheritance references, so once the search is done a single time, it's O(1) after that.
@@andrewbrogdon558 Wow, it‘s nice to know how things work in the background…I can already imagine how the cache process is implemented (probably a dictionary in context),
Finally I found the right way to move the data.
Great explanation but i still confuse on how it works in pratice
its made me laugh when i saw 2:45 and understand whole video :D
Funny and informative
shall I add "wow, Im the first to comment !!!" ? In any case love your videos guys, keep it on.
My big Nose!! kikikiki. That made my night. Thanks futter team, you are a Revolution in Mobile dev.
I cannot get it to work, my inherited widget is always null. Does anyone else have this problem?
thank you, sir, but can we use like "widget.nose"?
"The fact that something is 'final' only means it can not be reassigned. It does not mean it can not change internally."
I don't understand this. Can you elaborate, please?
Never mind, I asked ChatGPT.
lol blow and sneeze method calls, this is the most Funniest coding example ever!!!!!!!!
useful
4:04 You can hear elements of the sneezeNose and blowYourNose widgets here 😁
0 information about inheritFromWidgetOfExactType being depreciated?
I am a bit cruious, why not just use providers here? I followed quite a few tutorials, but I was not aware anybody taught this one thought.
providers is just a wrapper around Inherited Widget and Stateful Widget. It saves you, among other things, from writing a lot of boilerplate code
4:30 Keys
So technically a Provider Consumer Scenario
Yes but with added hierarchy!!
It seems the theory is simple, but writing a complex app with flutter (declarative approach) and handling states can be a little harder than android SDK (imperative approach).
You should not hold a mutable widget inside an InheritedWidget, as InheritedWidget could be recreated and state will be lost.
So if I want to change the contents of the asset I need to add value update methods to the asset class? (For example, when I have a class usersettings.dart and want to distribute that in the app using inheritedwidget)?
While I appreciate the humor, this sort of examples aren't really useful when it comes to programming concepts. It's like teaching OOP with the infamous "cat extends animal" analogies.
What are you actually waiting for? I think is a perfect example, the same for the "Cat extends Animal" are pretty good examples for explain a concepts or at least were good for me.
I understand your sentiments but I feel that's one problem domain any one could relate to and understand without having to be an expert in any field. If he uses a problem domain that is to specific to a field of study then a lot of people would be lost.
I love Google and everything concerned to it.
helo
hilarious XD
what oculd NoseService possibly have xD
Hi.
Out of date content,please update it or remove it
🙂
I dont know this guy cool nature makes me laugh
😂😂😂😂
Яндекс круче..
deprecated I guess :D
mark
It is great to speak funny, but it is not that great to use "noseService"? it is too abstract to us... i do not understand
Thank you!