ไม่สามารถเล่นวิดีโอนี้
ขออภัยในความไม่สะดวก
When to Use Keys - Flutter Widgets 101 Ep. 4
ฝัง
- เผยแพร่เมื่อ 12 ส.ค. 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
th-cam.com/video/CXedqMlLo7M/w-d-xo.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 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.
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.
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.
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)
Every time i watch this i learn a little bit more. Thanks Emily!
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.
This will be really really helpful!!
I wrote a code for this implemention before but it was really complex to change or even maintain.
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
The most clear explanation of Keys currently online!!!!
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!
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 WAS EXACTLY WHAT I NEEDED YESSSS
More in depth tutorials like that! Great video!
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.
Hi Emily! Thanks for sharing in such an understandable way!
That's exactly what I nedded! Thank you guys!
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.
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!
Great explanation !!! Thx for the tutorial !!!
Btw, her way of explanation is just awesome. She's great with her style and ways of speaking.
Very informative and entertaining. Awesome.
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.
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
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 :)
Documentation for keys was not very clear. Finally some clarity!
Absolutely right
No documentation is ever very clear. lol
Makes sense. Thank you!
Awesome video content and delivery - go Emily!
Amazing Lecture
Very nice explanation. Loved it
Thank you! Cool stuff!
Wow !! Interesting information for key
Thank u mam.
good! I fix my problems thanks to this video.
This is the most needed video ever and just found 3 years later lolz
this series is very good. please try and conitnue it. thanks
Saved my day!
Very helpful !!
Awesome video, I was about to use keys when I didn't need 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.
Wow, that was like a magic, got it now. Thanks
Very good explanation!
Thank you!
nice video! It's helped me very very lot.
Very well said.
Wooooow I like your presentation so much.
wonderful!
Awesome video! You guys make great tutorials for Flutter!
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
Great vid 👌
now i have something to see here. its not boring anymore
THANK YOU SO MUCH!!!!!
Coming for Maximilan Course :)
8:30 we need a code example.
I'm struggling with GlobalKey, getting an error "multiple widget in the tree with the same GlobalKey".
Well done
nice one!!
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.
Meredith from the office to flutter team, nice!
thank you for expansion, that's help me on project
It's keeeeeeeey tiiiiiiiiiiiiiiiiiiiiiiiiiiiiiime : ) like It !!
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
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.
Saw you on the GDD , contributor of Fluwx.
Excellent.Thank you, Emily!
Very nice
The perfect explanation :-) Thank you
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.
Please share with us source code of video , it becomes more understandable .Thank you
Nice show. Girl awesome story teller
Thank you...
thank you
Amazing, just to being persist and enlightenment
I can't tell how relaxed i am after watching this
You're natural! Great job!
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 :)
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
She is the best instructor
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.
Do you always have to pass unique keys manually?
I need a practical example that details how the GlobalKeys use case at 8:31 is supposed to be structured.
Is there any code snippet available to check?
Yayyy this is soooo gooood
keep it up..
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
Any update on dedicated TH-cam channel for Flutter?
Thanks
How can I use emulator in Visual Studio? I've installed the android emulator for VS but can't run my application
With a good community and team Google flutter will succeed . 👁👅👁
Thank you, here's the link for the simple PositionedTiles app: medium.com/flutter/keys-what-are-they-good-for-13cb51742e7d.
Content of the video as text including the code can be found here: medium.com/flutter/keys-what-are-they-good-for-13cb51742e7d
I spent 8:27 minutes to find PageStorageKey, which is very important.
can you explain why this is so important?
Does someone know where can I buy those Official Flutter t-shirts?
Is the code for the todo app shown in the video available open source?
@@emilyfortuna2262 thanks boss
Please correct the subtitles at 4:59 from "staple widgets" to "statefull widgets".
Thanks...
I don't get it, the stateful widget I just made still swapped correctly without me specifying the key. Is this tutorial outdated?
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?