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

  • @EmanueleTozzato
    @EmanueleTozzato4 жыл бұрын

    Of all the videos in the series, I feel like I've started with the most complicated! :)

  • @AslamShaik

    @AslamShaik

    4 жыл бұрын

    😁

  • @ArshdeepSingh-ob7rj

    @ArshdeepSingh-ob7rj

    3 жыл бұрын

    Yeah That's true, Everything went above my head

  • @4petsapp295

    @4petsapp295

    3 жыл бұрын

    kzread.info/dash/bejne/dYyZxtOGnK_VZ7A.html

  • @s-sugoi835

    @s-sugoi835

    3 жыл бұрын

    Lmao

  • @anirudh7455

    @anirudh7455

    3 жыл бұрын

    Go to flutter.dev for beginner

  • @lucasyoung9594
    @lucasyoung95944 жыл бұрын

    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

    @alexjoyel355

    Жыл бұрын

    am also learn in her course.

  • @vishalgupta7522

    @vishalgupta7522

    Жыл бұрын

    angela sent me here

  • @pradeep422
    @pradeep4225 жыл бұрын

    Now we talking!!!!!! Most advanced and productive video in this series!!!!!!

  • @AlexanderArendar

    @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

    @nested9301

    3 жыл бұрын

    advanced ? LOL,

  • @greatestuff
    @greatestuff5 жыл бұрын

    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

    @harry356

    2 жыл бұрын

    What problem do keys solve? I cannot make anything from this video...

  • @chrisstromberg6527

    @chrisstromberg6527

    2 жыл бұрын

    @@harry356 You are not alone.

  • @akperheogheneovo4954

    @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

    @mb77mb66

    9 ай бұрын

    No... this sucks in Flutter, this is us having to know about Flutter engine implementation details.

  • @KaranChecker
    @KaranChecker5 жыл бұрын

    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

    @hts746

    4 жыл бұрын

    I believe some provided code would make life easier 4 everyone. But Video explains is pretty nice

  • @EmilianoKalafatic

    @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

    @softwarecodecs2534

    4 жыл бұрын

    @Kalsang Dorjee Same didn't get anything ,can you explain if you got it

  • @DarDarbl4

    @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.

  • @RinaldiMeteoric
    @RinaldiMeteoric3 жыл бұрын

    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.

  • @dkq986
    @dkq9865 жыл бұрын

    This will be really really helpful!! I wrote a code for this implemention before but it was really complex to change or even maintain.

  • @subtex
    @subtex5 жыл бұрын

    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.

  • @nosmirck
    @nosmirck5 жыл бұрын

    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)

  • @sanketsahasrabudhe8106
    @sanketsahasrabudhe81064 жыл бұрын

    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

    @gregsullivan7408

    Жыл бұрын

    Not my bag at all - I prefer a much more dry presentation - it's like she's doing an infomercial. IMHO.

  • @vicmath1005

    @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

    @gregsullivan7408

    7 ай бұрын

    ​@@vicmath1005I like the "Net Ninja" - excellent teacher/presenter

  • @danvilela
    @danvilela5 жыл бұрын

    Finally i could understand this! Thanks for the video, very educational!

  • @zeccy337
    @zeccy3375 жыл бұрын

    Hey thanks so much for these videos, i'm trying to use flutter and dart for a school project and this is great

  • @gustavoalejandrocanulmena3301

    @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?

  • @danvilela
    @danvilela4 жыл бұрын

    Every time i watch this i learn a little bit more. Thanks Emily!

  • @jatingoyal6682
    @jatingoyal6682 Жыл бұрын

    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

  • @YTSliv
    @YTSliv5 жыл бұрын

    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

    @jiren8991

    4 жыл бұрын

    Thanks bro, for explaining in this way

  • @yashrajsingh8181

    @yashrajsingh8181

    2 жыл бұрын

    Awesome explanation!

  • @amugofjava
    @amugofjava5 жыл бұрын

    Really helpful video as I never fully understood when to use keys.

  • @jajasaria

    @jajasaria

    5 жыл бұрын

    All i understood is that when changing list order the rest is .......

  • @xhunter91

    @xhunter91

    5 жыл бұрын

    @@jajasaria When you change a list's order of one type. They are not needed when the list has distinct types.

  • @yamsani735
    @yamsani7352 жыл бұрын

    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.

  • @NextGenerationEdit
    @NextGenerationEdit5 жыл бұрын

    More in depth tutorials like that! Great video!

  • @tomgrin10
    @tomgrin103 жыл бұрын

    THIS WAS EXACTLY WHAT I NEEDED YESSSS

  • @noahderebe
    @noahderebe Жыл бұрын

    The most clear explanation of Keys currently online!!!!

  • @CarlitosVJ1
    @CarlitosVJ14 жыл бұрын

    Hi Emily! Thanks for sharing in such an understandable way!

  • @joaopedromartins573
    @joaopedromartins5733 жыл бұрын

    That's exactly what I nedded! Thank you guys!

  • @devonedmonds9223
    @devonedmonds92235 жыл бұрын

    Documentation for keys was not very clear. Finally some clarity!

  • @abhishekpandey4133

    @abhishekpandey4133

    5 жыл бұрын

    Absolutely right

  • @william_chidube

    @william_chidube

    3 жыл бұрын

    No documentation is ever very clear. lol

  • @AshutoshATS
    @AshutoshATS4 жыл бұрын

    Btw, her way of explanation is just awesome. She's great with her style and ways of speaking.

  • @jagdishshetty4782
    @jagdishshetty47825 жыл бұрын

    Great explanation !!! Thx for the tutorial !!!

  • @NicholasMaietta
    @NicholasMaietta5 жыл бұрын

    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

    @guru_bro

    18 күн бұрын

    How u doing?

  • @NicholasMaietta

    @NicholasMaietta

    18 күн бұрын

    @@guru_bro Well, I posted my comment 5 years ago. No longer using Flutter or Dart, I grew sick of it.

  • @KlausRies
    @KlausRies5 жыл бұрын

    Very informative and entertaining. Awesome.

  • @parosk9078
    @parosk90783 жыл бұрын

    honestly the best video that explain key in flutter !

  • @quetzalsaez2099
    @quetzalsaez20994 жыл бұрын

    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

  • @kentonraiford7784
    @kentonraiford77845 жыл бұрын

    Makes sense. Thank you!

  • @siri3359
    @siri33593 жыл бұрын

    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 :)

  • @ce9916
    @ce99162 жыл бұрын

    Awesome video content and delivery - go Emily!

  • @bhojpurimashupworld
    @bhojpurimashupworld5 жыл бұрын

    Wow !! Interesting information for key Thank u mam.

  • @SafdarAliShah_TimeTraveler
    @SafdarAliShah_TimeTraveler5 жыл бұрын

    Amazing Lecture

  • @zawadi563
    @zawadi5635 жыл бұрын

    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

  • @FidelGuajardo
    @FidelGuajardo5 жыл бұрын

    Thank you! Cool stuff!

  • @smithahn4959
    @smithahn49594 жыл бұрын

    good! I fix my problems thanks to this video.

  • @hiteshmalhotra183
    @hiteshmalhotra1834 жыл бұрын

    Wow, that was like a magic, got it now. Thanks

  • @fawazjoseph878
    @fawazjoseph8785 жыл бұрын

    Awesome video, I was about to use keys when I didn't need it

  • @ajk7151
    @ajk71514 жыл бұрын

    this series is very good. please try and conitnue it. thanks

  • @gautambedi591
    @gautambedi591 Жыл бұрын

    Very nice explanation. Loved it

  • @nevinjohn
    @nevinjohn5 жыл бұрын

    Saved my day!

  • @TheFlyingMonkey200
    @TheFlyingMonkey2003 жыл бұрын

    Awesome video! You guys make great tutorials for Flutter!

  • @harry356
    @harry3563 ай бұрын

    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.

  • @SomtoOfonagoro
    @SomtoOfonagoro5 жыл бұрын

    Very helpful !!

  • @HuuTran-rk9hk
    @HuuTran-rk9hk5 жыл бұрын

    nice video! It's helped me very very lot.

  • @saviobatista9619
    @saviobatista96192 жыл бұрын

    This is the most needed video ever and just found 3 years later lolz

  • @mahmud-ahsan
    @mahmud-ahsan4 жыл бұрын

    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.

  • @candlelight4693
    @candlelight46934 жыл бұрын

    It's keeeeeeeey tiiiiiiiiiiiiiiiiiiiiiiiiiiiiiime : ) like It !!

  • @Zhuinden
    @Zhuinden5 жыл бұрын

    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.

  • @alexandrostziokas
    @alexandrostziokas4 жыл бұрын

    The perfect explanation :-) Thank you

  • @BotandoFogo
    @BotandoFogo7 ай бұрын

    Very good explanation!

  • @mustafagamal672
    @mustafagamal6724 жыл бұрын

    Wooooow I like your presentation so much.

  • @djminikin
    @djminikin5 жыл бұрын

    Thank you!

  • @jarvanmo2908
    @jarvanmo29085 жыл бұрын

    Saw you on the GDD , contributor of Fluwx.

  • @MarkRonnelCamilon
    @MarkRonnelCamilon5 жыл бұрын

    Very well said.

  • @ivanyoed
    @ivanyoed3 жыл бұрын

    Great vid 👌

  • @sergey_molchanovsky
    @sergey_molchanovsky2 жыл бұрын

    8:30 we need a code example. I'm struggling with GlobalKey, getting an error "multiple widget in the tree with the same GlobalKey".

  • @phamucmanh1750
    @phamucmanh1750 Жыл бұрын

    Amazing, just to being persist and enlightenment

  • @hilmanshini_jigoku
    @hilmanshini_jigoku5 жыл бұрын

    now i have something to see here. its not boring anymore

  • @faisalbahli
    @faisalbahli3 жыл бұрын

    Meredith from the office to flutter team, nice!

  • @tylorvan6786
    @tylorvan67865 жыл бұрын

    wonderful!

  • @OumSaokosal
    @OumSaokosal5 жыл бұрын

    I spent 8:27 minutes to find PageStorageKey, which is very important.

  • @jajasaria

    @jajasaria

    5 жыл бұрын

    can you explain why this is so important?

  • @mohamedmirghani1747
    @mohamedmirghani17474 жыл бұрын

    Coming for Maximilan Course :)

  • @ysp1.2
    @ysp1.24 жыл бұрын

    Excellent.Thank you, Emily!

  • @elmeroranchero
    @elmeroranchero3 жыл бұрын

    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.

  • @govindkothari7989
    @govindkothari79894 жыл бұрын

    nice one!!

  • @scalybur
    @scalybur5 жыл бұрын

    Well done

  • @husseinwalidqudsi2776
    @husseinwalidqudsi27764 жыл бұрын

    Thank you, here's the link for the simple PositionedTiles app: medium.com/flutter/keys-what-are-they-good-for-13cb51742e7d.

  • @teukuyusransyahtandi723
    @teukuyusransyahtandi7234 жыл бұрын

    5:29 my sleepiness goes away.

  • @JoaoVictor-ir3yu

    @JoaoVictor-ir3yu

    4 жыл бұрын

    kkkkkkkk I was scared

  • @noway4517

    @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

  • @Trancecend
    @Trancecend5 жыл бұрын

    I need a practical example that details how the GlobalKeys use case at 8:31 is supposed to be structured.

  • @ivicasakota1642
    @ivicasakota16425 жыл бұрын

    You're natural! Great job!

  • @devithuotkeo
    @devithuotkeo5 жыл бұрын

    Yayyy this is soooo gooood

  • @Gentleman217
    @Gentleman2172 жыл бұрын

    I can't tell how relaxed i am after watching this

  • @dhruvinprajapati4345
    @dhruvinprajapati4345 Жыл бұрын

    thank you for expansion, that's help me on project

  • @vladarskopin3314
    @vladarskopin33142 жыл бұрын

    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

  • @LaunchpadMediaGroup1
    @LaunchpadMediaGroup15 жыл бұрын

    Can you get Emily to explain the entire flutter system from A-Z using this format? Thanks

  • @user-tv4kh4pc7s
    @user-tv4kh4pc7s4 жыл бұрын

    Nice show. Girl awesome story teller

  • @danilyusupov5364
    @danilyusupov53644 жыл бұрын

    Yeey, now I know the rocket science 🤣🚀

  • @KevinSheppard
    @KevinSheppard5 жыл бұрын

    Speaking of keys, who did the keying for this video? I can see the bluescreen you recorded in front of

  • @mohddarishkhan4819

    @mohddarishkhan4819

    5 жыл бұрын

    @@emilyfortuna2262 hahaa😂

  • @KevinSheppard

    @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.

  • @yangxu653
    @yangxu6534 жыл бұрын

    I'm confused. StatelessWidget has same type after swapped, why color changed?

  • @thisispax

    @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

    @karladuran2819

    2 жыл бұрын

    @@thisispax thank u :)

  • @thenifemi
    @thenifemi5 жыл бұрын

    Emily Fortuna 💯

  • @iamdavidwparker

    @iamdavidwparker

    5 жыл бұрын

    Yup!

  • @AaronSurty
    @AaronSurty5 жыл бұрын

    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?

  • @GALONE7
    @GALONE74 жыл бұрын

    Please correct the subtitles at 4:59 from "staple widgets" to "statefull widgets".

  • @batuhankrbb
    @batuhankrbb3 жыл бұрын

    She is the best instructor

  • @MistaWu
    @MistaWu4 жыл бұрын

    Thank you...

  • @shirosanchez265
    @shirosanchez265 Жыл бұрын

    THANK YOU SO MUCH!!!!!

  • 5 жыл бұрын

    With a good community and team Google flutter will succeed . 👁👅👁

  • @AliRaza-cs5go
    @AliRaza-cs5go3 жыл бұрын

    Loved the way you explained it Emily. The explanation was damn easy to understand. Thank you so much for your efforts Flutter Devs.

  • @sufyansajid550

    @sufyansajid550

    2 жыл бұрын

    where are u from brother?

  • @mb77mb66

    @mb77mb66

    9 ай бұрын

    You like Emily's soul.

  • @marxman1010
    @marxman10103 жыл бұрын

    Here is the source of the PositionedTiles example. gist.github.com/efortuna/e7c19ba78cbeda0ff2772060bc639b6d And explained here. medium.com/flutterdevs/keys-in-flutter-104fc01db48f

  • @emine4584
    @emine45843 жыл бұрын

    Please share with us source code of video , it becomes more understandable .Thank you

  • @muhammadasif6425
    @muhammadasif64255 жыл бұрын

    keep it up..

  • @heshansandeepa9471
    @heshansandeepa9471 Жыл бұрын

    Very nice

  • @WorstDeveloper
    @WorstDeveloper4 жыл бұрын

    Do you always have to pass unique keys manually?

  • @MikeDownes
    @MikeDownes5 жыл бұрын

    really useful thanks, well scripted too .. \o/ ..

  • @korovka
    @korovka2 жыл бұрын

    This doesn't make sense. At 1:29, why would two StatelessColorfulTile() widgets have different colours? Aren't they suppose to be identical?

  • @oswaldoolea2889
    @oswaldoolea2889 Жыл бұрын

    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...

  • @hakimhauston9040
    @hakimhauston90402 жыл бұрын

    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

  • @michelfeinstein
    @michelfeinstein5 жыл бұрын

    UniqueKey should be more explained.... It sounds like a random number, but by the video it isn't

  • @vinayak186f3
    @vinayak186f33 жыл бұрын

    My brain just exploded 😮

Келесі