When to Use Keys - Flutter Widgets 101 Ep. 4
HTML-код
- Опубликовано: 10 июл 2024
- 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 
Наука
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
ruclips.net/video/CXedqMlLo7M/видео.html
Lmao
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!
am also learn in her course.
angela sent me here
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,
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.
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.
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.
Every time i watch this i learn a little bit more. Thanks Emily!
The most clear explanation of Keys currently online!!!!
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)
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
Finally i could understand this! Thanks for the video, very educational!
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.
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
THIS WAS EXACTLY WHAT I NEEDED YESSSS
Btw, her way of explanation is just awesome. She's great with her style and ways of speaking.
More in depth tutorials like that! Great video!
That's exactly what I nedded! Thank you guys!
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 !
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.
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.
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?
Hi Emily! Thanks for sharing in such an understandable way!
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.
Great explanation !!! Thx for the tutorial !!!
Very informative and entertaining. Awesome.
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!
Awesome video content and delivery - go Emily!
Makes sense. Thank you!
This is the most needed video ever and just found 3 years later lolz
good! I fix my problems thanks to this video.
Very good explanation!
Amazing Lecture
Documentation for keys was not very clear. Finally some clarity!
Absolutely right
No documentation is ever very clear. lol
Wow, that was like a magic, got it now. Thanks
Thank you! Cool stuff!
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 :)
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
Very nice explanation. Loved it
Wow !! Interesting information for key
Thank u mam.
Saved my day!
Awesome video! You guys make great tutorials for Flutter!
Awesome video, I was about to use keys when I didn't need it
Very helpful !!
this series is very good. please try and conitnue it. thanks
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.
nice video! It's helped me very very lot.
now i have something to see here. its not boring anymore
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
Coming for Maximilan Course :)
Meredith from the office to flutter team, nice!
The perfect explanation :-) Thank you
I can't tell how relaxed i am after watching this
It's keeeeeeeey tiiiiiiiiiiiiiiiiiiiiiiiiiiiiiime : ) like It !!
Thank you!
Wooooow I like your presentation so much.
Very well said.
Excellent.Thank you, Emily!
Amazing, just to being persist and enlightenment
She is the best instructor
Great vid 👌
thank you for expansion, that's help me on project
nice one!!
You're natural! Great job!
wonderful!
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.
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.
Saw you on the GDD , contributor of Fluwx.
Well done
8:30 we need a code example.
I'm struggling with GlobalKey, getting an error "multiple widget in the tree with the same GlobalKey".
THANK YOU SO MUCH!!!!!
Very nice
Nice show. Girl awesome story teller
With a good community and team Google flutter will succeed . 👁👅👁
Yayyy this is soooo gooood
Thank you, here's the link for the simple PositionedTiles app: medium.com/flutter/keys-what-are-they-good-for-13cb51742e7d.
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.
Please correct the subtitles at 4:59 from "staple widgets" to "statefull widgets".
Thank you...
thank you
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
I need a practical example that details how the GlobalKeys use case at 8:31 is supposed to be structured.
Can you get Emily to explain the entire flutter system from A-Z using this format? Thanks
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.
Yeey, now I know the rocket science 🤣🚀
Here is the source of the PositionedTiles example.
gist.github.com/efortuna/e7c19ba78cbeda0ff2772060bc639b6d
And explained here.
medium.com/flutterdevs/keys-in-flutter-104fc01db48f
Thanks
I spent 8:27 minutes to find PageStorageKey, which is very important.
can you explain why this is so important?
Please share with us source code of video , it becomes more understandable .Thank you
It's Key Time!
Do you always have to pass unique keys manually?
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
keep it up..
Is there any code snippet available to check?
My brain just exploded 😮
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?
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
So on the case of stateful widgets they do swap, but just the state can't be handled.
really useful thanks, well scripted too .. \o/ ..
Thanks...