I to be honest didnt catch the usage entirely. The concept of the various keys .. yes, but not the usage. A slower more hands-on tutorial video would surely help.
4 роки тому+1
@Kalsang Dorjee You shouldn't develop software if that is the level of your imagination. Passing from a static element to one you can modify programmatically is a massive change. There is no way to do that if you do not have a particular identifier for each element.
Keys are kind of IDs, to differ elements and map between widjets tree and Element Tree, and in case of Global Key like a link to the concrete element State object, this global key provide access to the State to some Element from widget's code.
))) yeah, that should be one of first stuff in any book/tutorial, otherwise it is easy to miss the existence of topic and be surprised with strange "bugs" later :)
This is the best explanation any student could have asked for, literally the best teaching video and analogy for me in my entire life, thanks a lot Emily
Angela just sent me here through her flutter bootcamp course. And seriously the Flutter team ROCKS!! Very clear, fun and helpful! Thanks Flutter Team and Emily for this video!
Emily Fortuna can teach instructors all over the world on how to make a video a thousand times more interesting! Great job Flutter Team! Keep more videos coming❤️
@@gregsullivan7408 Absolutely agree Greg. What a sickening drama of the presenter. That drama stops me from absorbing the message. I am forced to rewind at every sentence a COUPLE of times.
I'm not sure if I'm 100% correct, but another useful use of keys (that I've encountered) is finding specific Widgets during Widget Tests and UI Tests. Let's say you're loading the current temperature, you want to know if it rendered, you don't care about the actual reading but that the actual widget holding the value is rendered. In this case, Keys are very useful (unless I'm doing it wrong and there's another way to identify Widgets during Widgets and Integration Tests)
I'm really happy about choosing Flutter to develop my app. It has been 3 weeks since I've started learning flutter and videos like this really clarify and take out the struggle of understanding documentations. Thank you very much Flutter team.
Effort appreciated. A very simple concept but confusingly explained. X(),X(),... X() * 100 Shuffle them X(),X(),... X() * 100 Renderer see no change, there is no effect because things are not ordered shuffle have no meaning. The key prop makes X-1(), X-2(), ... X-100(), shuffle, X-57(),X-2(),...X-3() now some part changed, re-render, note X-2 will be reused in such case since the prop is the same, so a best practice is item.id and each key should be unique.
That was super helpful! I really appreciate the detailed explanation of value, global, object, unique keys. I also appreciate the comment about not using random numbers ..it really shows that they are helping people avoid common stumbling blocks. Thanks Flutter Team! Keep up great work! Love these videos. She makes a comment about the BLOC pattern at the end, I would love to see a dedicated video or series of these types of preplanned and well-polished videos on that pattern.
@@harry356 actually hands on codes will have make one understand better. But the concept is something one has to be aware of not to continue debugging forever.
I'm just getting into Dart2 and Flutter. I'm just now getting into Mobile app development after 20 years of web development. I have a feeling i'll be watching many of these videos for inspiration and to help me hammer out the critical parts.
Excellent video. Really appreciate some more in-depth videos like this, while still being short enough to not be an major investment in time to watch it.
I have watched this video 3 times, once at the start of my flutter development, once one year in, and now two years in. Still do not understand it fully and why I need it in a certain spot in my widget tree. I do get that flutter stores an cheap element tree to quickly look up if the tree has changed. That probably fits into L1 cache.
These Google series are fantastic, but they will still be fantastic even if you put less humor. Google doesn't need lot of fun to be interesting and simple 😉
Thank you so much, i spent hours trying to resolve a problem with a listBuilder that didn't updated the UI when i used the method "removeAt()" and it was all because of the unique Keys of the childs that where not specified
@@emilyfortuna2262 I get the (totally unnecessary) sarcasm, but I'm just saying it wasn't up to the high standard I'm used to seeing from the channel. Upon review, though, it looks like it was your ear rings. My mistake.
Thank you great discussion about keys. Keys are a bit complicated topic specially when to use. Once one started developing apps he will understand how and when to use keys in widgets.
(2:25) IIUC, StatelessWidget has the color "within" the widget and it does update the reference to the new widget (3:11) that's why you'd see the colors "swap". In a StatefulWidget, the "color" is in a *State object* and not in the widget instance itself. That's why updating the reference (just as how Flutter did with Stateless because the widgets are the same type) will not mean that the color will change since the color is in a "State Object"
Good tactic to use in the middle of a speech to get the attention of the audience back. But I don't know whether that would be a good idea for the presentation of a university thesis. o0
Here is the source of the PositionedTiles example. gist.github.com/efortuna/e7c19ba78cbeda0ff2772060bc639b6d And explained here. medium.com/flutterdevs/keys-in-flutter-104fc01db48f
first, would be nice if updated to nullSafety if you want to keep it online, second, if you put the code on a repo it would help a lot, third, this shuldn't be a 101 introductory video type, but farther into learning flutter...
Hey Emily Wonderful video, I got a doubt though : When new stful widget is created with the matched key and attached to padding widget instead of the old widget, do you also mean that the colour might not always be orange but some random colour every time ? Thanks in advance :)
when displaying the same widget in different views why do we need a global key? does the element tree have two instances of the same widget? or is it the same element tree for the whole application.
I understand in which cases I want to use a ValueKey, but I realised that a UniqueKey would not be less useful in those situations. Then why is there a ValueKey, if the UniqueKey would do it's job? I'm not complaining, I have a case where I use ValueKey, I just want to know if there are any significant differences between the 2.
Is it ok to use static fields sometimes instead of keys? Like if I store information in a static class with a static variable. I'm a complete noobie btw so this is just a wild guess
A key opens a door, but also if you have an entire building (you rich) you need different keys to enter in every door. So the key MARK the door, the key mark the STATE of the application, so imagine from now on that the key is a colored post it. A Key is like your ID number, patent number, telephone number, well you got the concept. Now imagine I am a magician and can shuffle all the doors and houses magically, with the Key I can still open my door. In flutter you have a lot of refreshing widgets going on. A Key identifies the door/widget so if you have instead of the door fixed like in the 99 per cent boring houses in the world, they remain there (stateless) you do not need the colored post it, but if the magic shuffling(stateful) is taking over you want to have the post it to identify where you have to go
Of all the videos in the series, I feel like I've started with the most complicated! :)
😁
Yeah That's true, Everything went above my head
ua-cam.com/video/CXedqMlLo7M/v-deo.html
Lmao
Go to flutter.dev for beginner
I to be honest didnt catch the usage entirely. The concept of the various keys .. yes, but not the usage.
A slower more hands-on tutorial video would surely help.
@Kalsang Dorjee You shouldn't develop software if that is the level of your imagination. Passing from a static element to one you can modify programmatically is a massive change. There is no way to do that if you do not have a particular identifier for each element.
I believe some provided code would make life easier 4 everyone. But Video explains is pretty nice
@ oh oh sorry Mr 180 IQ lvl. We have different ways to "imagine" something or to understand things. Maybe you shouldn't be so "narcissistic"
@Kalsang Dorjee Same didn't get anything ,can you explain if you got it
Keys are kind of IDs, to differ elements and map between widjets tree and Element Tree, and in case of Global Key like a link to the concrete element State object, this global key provide access to the State to some Element from widget's code.
Now we talking!!!!!! Most advanced and productive video in this series!!!!!!
))) yeah, that should be one of first stuff in any book/tutorial, otherwise it is easy to miss the existence of topic and be surprised with strange "bugs" later :)
advanced ? LOL,
This is the best explanation any student could have asked for, literally the best teaching video and analogy for me in my entire life, thanks a lot Emily
Angela just sent me here through her flutter bootcamp course. And seriously the Flutter team ROCKS!! Very clear, fun and helpful! Thanks Flutter Team and Emily for this video!
am also learn in her course.
angela sent me here
Emily Fortuna can teach instructors all over the world on how to make a video a thousand times more interesting! Great job Flutter Team! Keep more videos coming❤️
Not my bag at all - I prefer a much more dry presentation - it's like she's doing an infomercial. IMHO.
@@gregsullivan7408 Absolutely agree Greg.
What a sickening drama of the presenter.
That drama stops me from absorbing the message. I am forced to rewind at every sentence a COUPLE of times.
@@vicmath1005I like the "Net Ninja" - excellent teacher/presenter
I'm not sure if I'm 100% correct, but another useful use of keys (that I've encountered) is finding specific Widgets during Widget Tests and UI Tests. Let's say you're loading the current temperature, you want to know if it rendered, you don't care about the actual reading but that the actual widget holding the value is rendered. In this case, Keys are very useful (unless I'm doing it wrong and there's another way to identify Widgets during Widgets and Integration Tests)
I'm really happy about choosing Flutter to develop my app. It has been 3 weeks since I've started learning flutter and videos like this really clarify and take out the struggle of understanding documentations. Thank you very much Flutter team.
Effort appreciated.
A very simple concept but confusingly explained.
X(),X(),... X() * 100
Shuffle them
X(),X(),... X() * 100
Renderer see no change, there is no effect because things are not ordered shuffle have no meaning.
The key prop makes
X-1(), X-2(), ... X-100(),
shuffle,
X-57(),X-2(),...X-3()
now some part changed, re-render, note X-2 will be reused in such case since the prop is the same, so a best practice is item.id and each key should be unique.
Thanks bro, for explaining in this way
Awesome explanation!
That was super helpful! I really appreciate the detailed explanation of value, global, object, unique keys. I also appreciate the comment about not using random numbers ..it really shows that they are helping people avoid common stumbling blocks. Thanks Flutter Team! Keep up great work! Love these videos. She makes a comment about the BLOC pattern at the end, I would love to see a dedicated video or series of these types of preplanned and well-polished videos on that pattern.
What problem do keys solve? I cannot make anything from this video...
@@harry356 You are not alone.
@@harry356 actually hands on codes will have make one understand better. But the concept is something one has to be aware of not to continue debugging forever.
No... this sucks in Flutter, this is us having to know about Flutter engine implementation details.
Really helpful video as I never fully understood when to use keys.
All i understood is that when changing list order the rest is .......
@@jajasaria When you change a list's order of one type. They are not needed when the list has distinct types.
Documentation for keys was not very clear. Finally some clarity!
Absolutely right
No documentation is ever very clear. lol
The most clear explanation of Keys currently online!!!!
I'm just getting into Dart2 and Flutter. I'm just now getting into Mobile app development after 20 years of web development. I have a feeling i'll be watching many of these videos for inspiration and to help me hammer out the critical parts.
How u doing?
@@guru_bro Well, I posted my comment 5 years ago. No longer using Flutter or Dart, I grew sick of it.
This video has actually helped me to fix one of the issue I have in my application because of not properly managing the widget keys.
Every time i watch this i learn a little bit more. Thanks Emily!
Hey thanks so much for these videos, i'm trying to use flutter and dart for a school project and this is great
What has your path as a developer been like for you? I'm learning too,
What do you recommend I learn to follow my path?
This is the most needed video ever and just found 3 years later lolz
Btw, her way of explanation is just awesome. She's great with her style and ways of speaking.
THIS WAS EXACTLY WHAT I NEEDED YESSSS
Excellent video. Really appreciate some more in-depth videos like this, while still being short enough to not be an major investment in time to watch it.
I have watched this video 3 times, once at the start of my flutter development, once one year in, and now two years in. Still do not understand it fully and why I need it in a certain spot in my widget tree.
I do get that flutter stores an cheap element tree to quickly look up if the tree has changed. That probably fits into L1 cache.
This will be really really helpful!!
I wrote a code for this implemention before but it was really complex to change or even maintain.
honestly the best video that explain key in flutter !
These Google series are fantastic, but they will still be fantastic even if you put less humor.
Google doesn't need lot of fun to be interesting and simple 😉
Finally i could understand this! Thanks for the video, very educational!
I can't tell how relaxed i am after watching this
Meredith from the office to flutter team, nice!
Thank you so much, i spent hours trying to resolve a problem with a listBuilder that didn't updated the UI when i used the method "removeAt()" and it was all because of the unique Keys of the childs that where not specified
8:30 we need a code example.
I'm struggling with GlobalKey, getting an error "multiple widget in the tree with the same GlobalKey".
now i have something to see here. its not boring anymore
Amazing, just to being persist and enlightenment
Speaking of keys, who did the keying for this video? I can see the bluescreen you recorded in front of
@@emilyfortuna2262 hahaa😂
@@emilyfortuna2262 I get the (totally unnecessary) sarcasm, but I'm just saying it wasn't up to the high standard I'm used to seeing from the channel. Upon review, though, it looks like it was your ear rings. My mistake.
this series is very good. please try and conitnue it. thanks
Is this valid June 2021? Right now, you just can't can't use keys without VSCode turning your code bloody red.
Please share with us source code of video , it becomes more understandable .Thank you
I spent 8:27 minutes to find PageStorageKey, which is very important.
can you explain why this is so important?
That's exactly what I nedded! Thank you guys!
Very good explanation!
Hi Emily! Thanks for sharing in such an understandable way!
Awesome video! You guys make great tutorials for Flutter!
Very nice explanation. Loved it
Awesome video content and delivery - go Emily!
Thank you great discussion about keys. Keys are a bit complicated topic specially when to use. Once one started developing apps he will understand how and when to use keys in widgets.
I'm confused. StatelessWidget has same type after swapped, why color changed?
(2:25) IIUC, StatelessWidget has the color "within" the widget and it does update the reference to the new widget (3:11) that's why you'd see the colors "swap".
In a StatefulWidget, the "color" is in a *State object* and not in the widget instance itself. That's why updating the reference (just as how Flutter did with Stateless because the widgets are the same type) will not mean that the color will change since the color is in a "State Object"
@@thisispax thank u :)
Great explanation !!! Thx for the tutorial !!!
She is the best instructor
5:29 my sleepiness goes away.
kkkkkkkk I was scared
Good tactic to use in the middle of a speech to get the attention of the audience back. But I don't know whether that would be a good idea for the presentation of a university thesis. o0
Thank you, here's the link for the simple PositionedTiles app: medium.com/flutter/keys-what-are-they-good-for-13cb51742e7d.
that was so educative and hey ..i dont knw why but i have seen many of your vids about flutter and i like your charming state
More in depth tutorials like that! Great video!
Wow, that was like a magic, got it now. Thanks
Ah. So for proper state restoration, we'd need to be able to persist both the navigation route list, AND the key hierarchy. Interesting video.
Coming for Maximilan Course :)
Can you get Emily to explain the entire flutter system from A-Z using this format? Thanks
This doesn't make sense. At 1:29, why would two StatelessColorfulTile() widgets have different colours? Aren't they suppose to be identical?
I need a practical example that details how the GlobalKeys use case at 8:31 is supposed to be structured.
Why wouldn't the framework just use keys by default and under the radar so we wouldn't have to worry about it? Is it bad for performance?
really useful thanks, well scripted too .. \o/ ..
Overall good video, but a bit misleading: You don't need UniqueKey() for the tile swap example, a simple ValueKey(1) and ValueKey(2) will do.
Here is the source of the PositionedTiles example.
gist.github.com/efortuna/e7c19ba78cbeda0ff2772060bc639b6d
And explained here.
medium.com/flutterdevs/keys-in-flutter-104fc01db48f
first, would be nice if updated to nullSafety if you want to keep it online, second, if you put the code on a repo it would help a lot, third, this shuldn't be a 101 introductory video type, but farther into learning flutter...
Emily Fortuna 💯
Yup!
good! I fix my problems thanks to this video.
Love the energy of this video! All Google developer videos should be this way. :) Is there a link to the change colors app you created for this demo?
Awesome video, I was about to use keys when I didn't need it
Hey Emily Wonderful video, I got a doubt though :
When new stful widget is created with the matched key and attached to padding widget instead of the old widget, do you also mean that the colour might not always be orange but some random colour every time ? Thanks in advance :)
Saw you on the GDD , contributor of Fluwx.
UniqueKey should be more explained.... It sounds like a random number, but by the video it isn't
The perfect explanation :-) Thank you
Loved the way you explained it Emily. The explanation was damn easy to understand. Thank you so much for your efforts Flutter Devs.
where are u from brother?
You like Emily's soul.
Very informative and entertaining. Awesome.
Amazing Lecture
I don't get it, the stateful widget I just made still swapped correctly without me specifying the key. Is this tutorial outdated?
With a good community and team Google flutter will succeed . 👁👅👁
Please correct the subtitles at 4:59 from "staple widgets" to "statefull widgets".
when displaying the same widget in different views why do we need a global key? does the element tree have two instances of the same widget? or is it the same element tree for the whole application.
I understand in which cases I want to use a ValueKey, but I realised that a UniqueKey would not be less useful in those situations.
Then why is there a ValueKey, if the UniqueKey would do it's job?
I'm not complaining, I have a case where I use ValueKey, I just want to know if there are any significant differences between the 2.
Is it ok to use static fields sometimes instead of keys? Like if I store information in a static class with a static variable. I'm a complete noobie btw so this is just a wild guess
Nice show. Girl awesome story teller
it was good though, but I think a simpler example would be better, with a short tree of widgets, so the concept would be clearer to understand ..
Don't really understand the example on how the GlobalKey works with the password.
thank you for expansion, that's help me on project
again why isn't this done automatically ? generating unique keys for each widget doesn't sound like an intensive task for the mobile to handle.
Ok, random numbers are not suggested to be used as keys, because widget can be rebuild. But, UniqueKey will also have this problem, rught?
nice video! It's helped me very very lot.
Makes sense. Thank you!
You're natural! Great job!
Do you always have to pass unique keys manually?
It's keeeeeeeey tiiiiiiiiiiiiiiiiiiiiiiiiiiiiiime : ) like It !!
Google will do well , if they reduce the drama element from these tutorial videos
Wow !! Interesting information for key
Thank u mam.
Excellent.Thank you, Emily!
A key opens a door, but also if you have an entire building (you rich) you need different keys to enter in every door. So the key MARK the door, the key mark the STATE of the application, so imagine from now on that the key is a colored post it. A Key is like your ID number, patent number, telephone number, well you got the concept. Now imagine I am a magician and can shuffle all the doors and houses magically, with the Key I can still open my door. In flutter you have a lot of refreshing widgets going on. A Key identifies the door/widget so if you have instead of the door fixed like in the 99 per cent boring houses in the world, they remain there (stateless) you do not need the colored post it, but if the magic shuffling(stateful) is taking over you want to have the post it to identify where you have to go
Is the code for the todo app shown in the video available open source?
@@emilyfortuna2262 thanks boss
Wooooow I like your presentation so much.
Very well said.
So on the case of stateful widgets they do swap, but just the state can't be handled.
Very helpful !!
Anyone can share the complete sourcecode in this tutorial?