ไม่สามารถเล่นวิดีโอนี้
ขออภัยในความไม่สะดวก
A guide to Inherited Widgets - Flutter Widgets 101 Ep. 3
ฝัง
- เผยแพร่เมื่อ 15 ส.ค. 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/FlutterW...
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 :) ?
😂😂😂 this guy is awesome
His nose as well.
"Interview question". I remember it was one of them. Nicely explained!
NOSEly explained! :D
Thumbs up for Example :)
Thumbs up into the big nose !
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.
After a year of studying flutter I finally understood this concept.
I thought only I am these much slow.
Very nice, this guy is like a Temple. Focused, calm ( not so enthusiastic voice ). I like it :D
Lol... Good one ! The video is both funny and educational. The sound effect made me laugh 4:06 made me laugh
I could pick that widget... but not in public.
that's a private function()
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;
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.
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.
Thank's God, now I got it! Thank's for the explanation!
great explaination
Haha! I like the nose example very much XD Finally I can understand InheritedWidget by this video, thanks!
Hahah, love the sound effects!
At 02:00 should be now like this : final nose =
context.dependOnInheritedWidgetOfExactType().asset;
pls make a video about context
does final nose = InheritedNose.of(context); really work? Don't we need some .nose?
InheritedNose.of(context).nose
Great short videos from the flutter team !!! Keep them coming !!!
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.
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.
Nice. If this man has a youtube channel, im subscribing.
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 → th-cam.com/play/PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG.html
Great explanation but i still confuse on how it works in pratice
Wow! Perfect. Creative and fun example. It always will be kept on my mind. :D
This is why we have to know a lot about a trees for the Google Interview.
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
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;
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
Awesome and hilarious ! Great video.
Nice guy! Thanks for explanation, was really helpful 👍
Finally a tutorial that KNOWS what it's talking about
This guy example is just perfect
4:04 You can hear elements of the sneezeNose and blowYourNose widgets here 😁
"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.
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),
Thank you, it's awesome!
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)?
My big Nose!! kikikiki. That made my night. Thanks futter team, you are a Revolution in Mobile dev.
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.
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!
Amazing series XD
how do i put the stateless widget up the tree? do i have to?
Thank you!
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?
Thanks a lot ❤
i liked last part of the video :D
lol blow and sneeze method calls, this is the most Funniest coding example ever!!!!!!!!
Quality content
nice and useful widget
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 😔
Finally I found the right way to move the data.
ThankU
4:30 Keys
clear and fun :)
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
Funny and informative
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
0 information about inheritFromWidgetOfExactType being depreciated?
useful
its made me laugh when i saw 2:45 and understand whole video :D
I cannot get it to work, my inherited widget is always null. Does anyone else have this problem?
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.
Hi.
thank you, sir, but can we use like "widget.nose"?
🙂
You should not hold a mutable widget inside an InheritedWidget, as InheritedWidget could be recreated and state will be lost.
helo
So technically a Provider Consumer Scenario
Yes but with added hierarchy!!
I love Google and everything concerned to it.
what oculd NoseService possibly have xD
shall I add "wow, Im the first to comment !!!" ? In any case love your videos guys, keep it on.
Out of date content,please update it or remove it
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).
hilarious XD
I dont know this guy cool nature makes me laugh
Яндекс круче..
😂😂😂😂
mark
deprecated I guess :D
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!