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 ;)
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 :) ?
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;
@@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;
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.
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;
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),
"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?
Declare a final list, now mutate it (add/remove items from it), done. You created a list that cannot be reassigned and changed it's content without changing it's reference.
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.
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 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.
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.
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... :(
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."
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.
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?
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).
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)?
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!
@@impzeropvp yeah.
"Interview question". I remember it was one of them. Nicely explained!
NOSEly explained! :D
After a year of studying flutter I finally understood this concept.
I thought only I am these much slow.
Thumbs up for Example :)
Thumbs up into the big nose !
I liked the part of service so much, so inspiring with these sounds in background.
Fantastic video! I can't imagine how many takes that must have required.
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.
Very nice, this guy is like a Temple. Focused, calm ( not so enthusiastic voice ). I like it :D
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;
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.
Finally a tutorial that KNOWS what it's talking about
Great short videos from the flutter team !!! Keep them coming !!!
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
inheritFromWidgetOfExactType is deprecated since v1.12.1, use dependOnInheritedWidgetOfExactType instead.
Great explanation but i still confuse on how it works in pratice
Lol... Good one ! The video is both funny and educational. The sound effect made me laugh 4:06 made me laugh
I think some of the syntax is now outdated; correct me if I'm wrong.
(I'm using Flutter 2.0.3)
This is why we have to know a lot about a trees for the Google Interview.
Nice. If this man has a youtube channel, im subscribing.
Thank's God, now I got it! Thank's for the explanation!
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.
This guy example is just perfect
Haha! I like the nose example very much XD Finally I can understand InheritedWidget by this video, thanks!
Hahah, love the sound effects!
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
pls make a video about context
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),
"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.
Declare a final list, now mutate it (add/remove items from it), done.
You created a list that cannot be reassigned and changed it's content without changing it's reference.
does final nose = InheritedNose.of(context); really work? Don't we need some .nose?
InheritedNose.of(context).nose
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.
Finally I found the right way to move the data.
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
Wow! Perfect. Creative and fun example. It always will be kept on my mind. :D
At 02:00 should be now like this : final nose =
context.dependOnInheritedWidgetOfExactType().asset;
Awesome and hilarious ! Great video.
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.
Out of date content,please update it or remove it
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!
My big Nose!! kikikiki. That made my night. Thanks futter team, you are a Revolution in Mobile dev.
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
i liked last part of the video :D
Nice guy! Thanks for explanation, was really helpful 👍
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.
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
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 😔
Thanks a lot ❤
Quality content
Amazing series XD
4:04 You can hear elements of the sneezeNose and blowYourNose widgets here 😁
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?
Thank you!
Thank you, it's awesome!
ThankU
how do i put the stateless widget up the tree? do i have to?
So technically a Provider Consumer Scenario
Yes but with added hierarchy!!
nice and useful widget
You should not hold a mutable widget inside an InheritedWidget, as InheritedWidget could be recreated and state will be lost.
shall I add "wow, Im the first to comment !!!" ? In any case love your videos guys, keep it on.
lol blow and sneeze method calls, this is the most Funniest coding example ever!!!!!!!!
I cannot get it to work, my inherited widget is always null. Does anyone else have this problem?
0 information about inheritFromWidgetOfExactType being depreciated?
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
clear and fun :)
4:30 Keys
useful
its made me laugh when i saw 2:45 and understand whole video :D
Яндекс круче..
thank you, sir, but can we use like "widget.nose"?
🙂
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).
Hi.
helo
what oculd NoseService possibly have xD
I love Google and everything concerned to it.
I dont know this guy cool nature makes me laugh
hilarious XD
😂😂😂😂
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
deprecated I guess :D
mark
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)?
Thank you!