When to Use Keys - Flutter Widgets 101 Ep. 4
Ғылым және технология
In this episode, you will learn about key parameters on widgets: when you need keys, where to put keys in your widget tree, and which key is right for you. More specifically, you'll learn about he nuances of how keys work, discern when to use keys in your widget hierarchy, and identify the appropriate types of keys to optimize your widget-based structures.
Chapters:
0:00 - Intro
0:39 - When to use keys
2:20 - How keys work
5:13 - Where to put keys
6:53 - Types of Keys
Watch other episodes in the series → bit.ly/FlutterWidgets101
Subscribe to Google for Developers → goo.gle/developers
Пікірлер: 247
Of all the videos in the series, I feel like I've started with the most complicated! :)
@AslamShaik
4 жыл бұрын
😁
@ArshdeepSingh-ob7rj
3 жыл бұрын
Yeah That's true, Everything went above my head
@4petsapp295
3 жыл бұрын
kzread.info/dash/bejne/dYyZxtOGnK_VZ7A.html
@s-sugoi835
3 жыл бұрын
Lmao
@anirudh7455
3 жыл бұрын
Go to flutter.dev for beginner
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!
@alexjoyel355
Жыл бұрын
am also learn in her course.
@vishalgupta7522
Жыл бұрын
angela sent me here
Now we talking!!!!!! Most advanced and productive video in this series!!!!!!
@AlexanderArendar
4 жыл бұрын
))) 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 :)
@nested9301
3 жыл бұрын
advanced ? LOL,
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
2 жыл бұрын
What problem do keys solve? I cannot make anything from this video...
@chrisstromberg6527
2 жыл бұрын
@@harry356 You are not alone.
@akperheogheneovo4954
Жыл бұрын
@@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.
@mb77mb66
9 ай бұрын
No... this sucks in Flutter, this is us having to know about Flutter engine implementation details.
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 жыл бұрын
@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.
@hts746
4 жыл бұрын
I believe some provided code would make life easier 4 everyone. But Video explains is pretty nice
@EmilianoKalafatic
4 жыл бұрын
@ 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"
@softwarecodecs2534
4 жыл бұрын
@Kalsang Dorjee Same didn't get anything ,can you explain if you got it
@DarDarbl4
3 жыл бұрын
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.
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.
This will be really really helpful!! I wrote a code for this implemention before but it was really complex to change or even maintain.
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'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)
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
Жыл бұрын
Not my bag at all - I prefer a much more dry presentation - it's like she's doing an infomercial. IMHO.
@vicmath1005
7 ай бұрын
@@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.
@gregsullivan7408
7 ай бұрын
@@vicmath1005I like the "Net Ninja" - excellent teacher/presenter
Finally i could understand this! Thanks for the video, very educational!
Hey thanks so much for these videos, i'm trying to use flutter and dart for a school project and this is great
@gustavoalejandrocanulmena3301
5 ай бұрын
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?
Every time i watch this i learn a little bit more. Thanks Emily!
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
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.
@jiren8991
4 жыл бұрын
Thanks bro, for explaining in this way
@yashrajsingh8181
2 жыл бұрын
Awesome explanation!
Really helpful video as I never fully understood when to use keys.
@jajasaria
5 жыл бұрын
All i understood is that when changing list order the rest is .......
@xhunter91
5 жыл бұрын
@@jajasaria When you change a list's order of one type. They are not needed when the list has distinct types.
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.
More in depth tutorials like that! Great video!
THIS WAS EXACTLY WHAT I NEEDED YESSSS
The most clear explanation of Keys currently online!!!!
Hi Emily! Thanks for sharing in such an understandable way!
That's exactly what I nedded! Thank you guys!
Documentation for keys was not very clear. Finally some clarity!
@abhishekpandey4133
5 жыл бұрын
Absolutely right
@william_chidube
3 жыл бұрын
No documentation is ever very clear. lol
Btw, her way of explanation is just awesome. She's great with her style and ways of speaking.
Great explanation !!! Thx for the tutorial !!!
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.
@guru_bro
18 күн бұрын
How u doing?
@NicholasMaietta
18 күн бұрын
@@guru_bro Well, I posted my comment 5 years ago. No longer using Flutter or Dart, I grew sick of it.
Very informative and entertaining. Awesome.
honestly the best video that explain key in flutter !
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
Makes sense. Thank you!
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 :)
Awesome video content and delivery - go Emily!
Wow !! Interesting information for key Thank u mam.
Amazing Lecture
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
Thank you! Cool stuff!
good! I fix my problems thanks to this video.
Wow, that was like a magic, got it now. Thanks
Awesome video, I was about to use keys when I didn't need it
this series is very good. please try and conitnue it. thanks
Very nice explanation. Loved it
Saved my day!
Awesome video! You guys make great tutorials for Flutter!
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.
Very helpful !!
nice video! It's helped me very very lot.
This is the most needed video ever and just found 3 years later lolz
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.
It's keeeeeeeey tiiiiiiiiiiiiiiiiiiiiiiiiiiiiiime : ) like It !!
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.
The perfect explanation :-) Thank you
Very good explanation!
Wooooow I like your presentation so much.
Thank you!
Saw you on the GDD , contributor of Fluwx.
Very well said.
Great vid 👌
8:30 we need a code example. I'm struggling with GlobalKey, getting an error "multiple widget in the tree with the same GlobalKey".
Amazing, just to being persist and enlightenment
now i have something to see here. its not boring anymore
Meredith from the office to flutter team, nice!
wonderful!
I spent 8:27 minutes to find PageStorageKey, which is very important.
@jajasaria
5 жыл бұрын
can you explain why this is so important?
Coming for Maximilan Course :)
Excellent.Thank you, Emily!
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.
nice one!!
Well done
Thank you, here's the link for the simple PositionedTiles app: medium.com/flutter/keys-what-are-they-good-for-13cb51742e7d.
5:29 my sleepiness goes away.
@JoaoVictor-ir3yu
4 жыл бұрын
kkkkkkkk I was scared
@noway4517
4 жыл бұрын
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
I need a practical example that details how the GlobalKeys use case at 8:31 is supposed to be structured.
You're natural! Great job!
Yayyy this is soooo gooood
I can't tell how relaxed i am after watching this
thank you for expansion, that's help me on project
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
Can you get Emily to explain the entire flutter system from A-Z using this format? Thanks
Nice show. Girl awesome story teller
Yeey, now I know the rocket science 🤣🚀
Speaking of keys, who did the keying for this video? I can see the bluescreen you recorded in front of
@mohddarishkhan4819
5 жыл бұрын
@@emilyfortuna2262 hahaa😂
@KevinSheppard
5 жыл бұрын
@@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.
I'm confused. StatelessWidget has same type after swapped, why color changed?
@thisispax
4 жыл бұрын
(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"
@karladuran2819
2 жыл бұрын
@@thisispax thank u :)
Emily Fortuna 💯
@iamdavidwparker
5 жыл бұрын
Yup!
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?
Please correct the subtitles at 4:59 from "staple widgets" to "statefull widgets".
She is the best instructor
Thank you...
THANK YOU SO MUCH!!!!!
With a good community and team Google flutter will succeed . 👁👅👁
Loved the way you explained it Emily. The explanation was damn easy to understand. Thank you so much for your efforts Flutter Devs.
@sufyansajid550
2 жыл бұрын
where are u from brother?
@mb77mb66
9 ай бұрын
You like Emily's soul.
Here is the source of the PositionedTiles example. gist.github.com/efortuna/e7c19ba78cbeda0ff2772060bc639b6d And explained here. medium.com/flutterdevs/keys-in-flutter-104fc01db48f
Please share with us source code of video , it becomes more understandable .Thank you
keep it up..
Very nice
Do you always have to pass unique keys manually?
really useful thanks, well scripted too .. \o/ ..
This doesn't make sense. At 1:29, why would two StatelessColorfulTile() widgets have different colours? Aren't they suppose to be identical?
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...
Anybody knows the details and explanation of the problem in the Hacker News app mentioned briefly @ 1:06 ? I was facing something like that but not sure if it is similar issue
UniqueKey should be more explained.... It sounds like a random number, but by the video it isn't
My brain just exploded 😮