Flutter Tutorial - Flutter Keys & Value Key

the value key is useful if you want to preserve the state of state for widgets when they move around in the widget tree therefore we will look at typical use cases such as adding or removing a widget from a list another use case is the reordering of widgets where we also learn how to use a value key if you are new here subscribe to my channel and make sure to watch this video till the end let's get started with a simple use case we have here two text fields and one is holding our email and the other one is holding our username and now let's say we remove here one widget from the widget tree if we click here on this remove email button and then this email field should disappear if you click then on this button then you will see that the email is going inside of the username and this is pretty weird because before it was within the email field and now if you remove the email field then we have here this username field which is correct however somehow the value of our text field is not correct because here we have the email inside instead of the username to fix this issue and to preserve our username value we want to make use of value keys in general value keys have two responsibilities first of all it identifies a widget in your application and secondly what is for us important is that it also preserve the state of state for widgets if they move around in the widget tree and therefore i have created here an example with two text fields so we have here one text field and another text field and if you go into one of these text fields then you see that it is of a type of stateful widget and this means that the text field has a state which is in this case this value which you see here inside and we want to use here a value key to preserve the state of the stateful widget so that if we remove here widget then it is also handling everything correctly so let's go back to our two text fields and we want to remove now a widget by simply adding here a condition in our state when we want to show here our email or not and then based on this condition we show you our first text field which is here this email text field and lastly we go to this remove email button and if we click on this button then we simply want to put the show email flag to false and this will then hide here our text field because if it is false then it is removed from this widget tree and with this we can try the example again out so in the first field we have an email and in the second we have a username and if i click on this remove email you see that we have the email within our username field this arrow that the state gets mixed is only happening if we use here two stateful widgets of the same type and then if we remove your one stateful widget of this type which we have tries here inside then flutter has a problem to classify which state it should keep because flutter only looks here at the type of the widget and if you have your two widgets of the same type then flutter cannot identify them uniquely and we need to help flutter and put a value key inside of these widgets therefore we simply add here to each of these text fields a key and this is then a value key and here inside you can set for example an integer or a string or whatever you like the important thing is only that this value is unique so here we create another field for this other text field and here you need to put another value inside and you cannot put here a value of one inside because we already have this value key with one so make sure that your value key is always unique and with these value keys we can try our example again out so here i have this email within our email field and the username within our user field and then i click here on remove email and now you see that we have here the username within our username field and to sum everything up again flutter identifies widgets by its type and if you have widgets with different types then everything works fine however if you have widgets with the same type and they are stateful widgets then you have a problem and therefore you need to help flutter if the type is same and you also need to put here a key inside of these same types and this is normally what you do inside of a list so for example if you have a list view or column or whatever and you have same types inside then make sure that you also put a key inside and with these keys flutter is now able to identify each of these text fields uniquely within your value key you can put an identifier inside for example an integer a string or whatever you like and you also can put here for example an object inside and also for these other text field you also can set an object inside and these objects now can also identify uniquely this text field therefore we also need to create here this object and here inside we simply put right now a number inside however this object can also be more complex so it can have many fields if you now try our example again out and click here on remove email while you have here these fields inside then you see that there is some error and our username is completely empty and this is a bit strange and how you can fix this is by overriding here this equals and hashcode method and this is really important so always make sure that you overwrite the equals method if you put an object as your value key inside and now we can try it again out so i have here an email inside and a username and this time i click again on this button and you see that the username is preserved we also want to look at a second example where you can make use of the value key and like you can see here we get every time this arrow and the images are flipping and therefore we can make use of a value key to actually fix this error therefore i have created here a reordable list view which is displaying some items our user items and inside of this we have every time a list tile which is then displaying here our image as a circle avatar which is then displayed at the beginning and also the username as the text which is then displayed after it if you want to learn more about the re-audible list view how it works then i will link a video inside of the description of this video here in our case the reorderable list view requires that all the widgets which are displayed inside of the item builder have a value key and therefore you need to set here for example a value key and you can set for example it to the index and with this we have here for the first item the index zero as a value key and for the second item we have here the index one as the value key and so on the problem is now if i change here these widgets you see that the widgets are always flipping here around especially our image and this is because we change the position of our widgets and here our key is then dependable on the index and this index is currently changing if we move one item to another position and therefore it makes more sense to use here a unique value instead of an index for example and therefore we can use here for example this user object which is then displaying here our list tile and out of this user object we can for example take the username and this works only if the username is also unique among all the list items and with this we have now a unique value key for each of our list items and this means if i drag now here a widget around then you see that everything is working correctly and there is no issue that the images are flipping the only issue which could occur is if this value is not unique in our list therefore let's go here to our users list and here we can set for example another name and you see that this name and this name is duplicate and now if i hot restart this application you see that we get here this arrow that multiple widgets use the same key and this is because we identify our value key here over this username and therefore make always sure that this combination what you put here inside is really unique for this list item hello everyone thank you so much for watching this video please make sure to give it a thumbs up and subscribe to my channel here to get the latest news about flutter and see you soon bye [Music]

Channel: Johannes Milke

Views: 5,330

Keywords: flutter value key, flutter losing widget state, flutter preserve state, flutter keys, when to use keys, what are flutter keys, widget tree, fluter widgets, stateful widget, where to put keys in your widget tree, flutter tutorial, gds: yes;, flutter, using keys in flutter, flutter widgets, when to use keys in flutter, use of key in flutter, local keys, valuekey, flutter widget tree, flutter valuekey

Id: -F_5yHm_Zso

Length: 8min 52sec (532 seconds)

Published: Sat Mar 13 2021

Reddit Comments

[u/JohannesMilke]

Source code: https://github.com/JohannesMilke/key_value_example

Follow me on Twitter: https://twitter.com/JohannesMilke

With the Flutter Value Key, you can preserve the state of Stateful Widgets while they are moving around within your Widget tree.