Flutter Tutorial - Flutter Keys & Global Key

the global key is used to access the state of state for widgets and we will look at two use cases first of all we look at a basic example where you learn how to use a global key and also when you should use a global key and therefore we build here a counter app to access the state of the counter and secondly we look at a more useful use case where we build a forms and validation app where a global key is always needed to access the state if you are new here subscribe to my channel and make sure to watch this video till the end let's get started with the simple counter app first therefore i have created here a build method and here inside i have created a counter widget which is a stateful widget and the state for which it has an estate which is this counter variable and it also has a method to increment this counter and lastly within this build method with an attacks the counter is displayed and now let's say we have a use case where we want to access here the state of this widget and also this method outside of this counter widget and this means that another widget for example a parent widget wants to have access to these things and how we can do it and access here the state is by creating a global key of this counter widget state and therefore you go to another widget which is in this case a parent widget and here you create then a global key with this counter widget state which is here the state of this class which we want to have access to secondly we need to put this global key inside of this counter widget and therefore you have here within every widget a key property which we want to set then to our key counter and in this case the key property is not inside because i have removed it however normally you have here this key in your constructor and this is then going to your saba constructor and this is all what we need for the configuration so we have created a global key of this counter widget state and inside of this counter widget we have then put the key inside the cool thing is now that we can use this global key to access here the state of this counter widget and therefore i simply create here a floating action button and if we click on this button then we want to get excess of this counter state which is here stored within our state and therefore you simply take here this key counter and on this key counter you can then access the state and here you can now access all the fields of your state so in our case we want to access here this counter field and then we store this value inside of another field which we later want to use and secondly we also can access all the methods of this state so here we have a public method which we can access and to access this method we use again our key counter and here within our current state we have then this increment method which we can access and we simply call this method and if we call this method then this year is executed and the counter is incremented by five so let's try it out i click here on this button and you see that it is always adding here five to the counter because it is executing near this method which is then incrementing our counter by five and it is then displaying the new counter within our text field there are three important things which you need to know about a global key so if we access here the state of our widget over this global key then we can only access public fields so you can only access here the public field and also only public methods so if something is private and has here the stash in front then you cannot access it there's only one exception where we also can access the private fields and the private methods of our stateful widget and this is if the stateful widget which we want to access is also within the same file where we access this global key so in this case the global key is in the same file as our counter widget and therefore we also can access here the private field however if the counter widget is in another file then we cannot access private fields we can only access public fields let's also use here a real world use case where we have here a form and validation and here we also want to make use of the global key i also want to show you especially when you can use a global key and in which cases you cannot use the global key so in this case we have here a list view and inside of this list view we have here three normal text fields and lastly we also have here this button and if we click on this button then we want to have a validation and this means if we click on this button and the user didn't fill the information inside which we want to have then he gets some error messages and this is what you can access with the global key let's start with the validation first so you go to every text form field and here you have a property which is called validator and here you basically check that it is a valid email and we simply check here that it has at least this ad symbol and if it has this ad symbol then it is a valid email and we return here null otherwise it is not valid and we return here an error message and now if we click here on the submit button then we also want to show here this error message if the user didn't put a valid email inside therefore if we want to enable this validation we simply go to this list view which is having here our text field and around our list view we need to wrap here this form widget and inside of this form widget we need to set our global key which is then this form key so let's have first of all a look at this form widget here you see that the precondition for a global key is fulfilled because here it is a state for widget and a global key can be only used for stateful widgets because a global key is literally there for accessing the state and if you have a status widget then we don't need a global key because the global key is only there for to access the state of the state for widget secondly we also have another precondition to check if our global key can be used and therefore we need to go to the form state for this you simply scroll a bit down until you see here that he is going to the state class and here we have the form state and here we can only use the global key if it is public so if there is a private class then we cannot access the state and with these two preconditions fulfilled we can now create a global key of this type form state therefore we go back to our widget and here in our state we create a new global key which has in this type form state and this form state is then the state class of our form widget where we want to have access to and like you notice this form key is then also going again to this form widget where we want to have access to the state and this is all what we need so we can now access over this form key the state of this form and the form is handling all the text form fields and also these validators where we want to have access to and therefore we simply go here to the submit button and this is basically here this button and here i have created a new method submit and here inside we can then access over our global key the state of this form state class and inside of this form state you have a method which is called validate which we want to call and this validate method then simply checks that all the text form fields with the validators inside are correct and this means if i click here on the submit button you get first of all this error message because this validator is not correct because within our validator we check that the email is valid and in our case the email is not valid and this is exactly what we have called here with this form validate method if the form is later valid and there are no error message anymore in our form then we can later lock in our user and this is what we want to do then here inside of this condition so let's put right now a valid email inside and click on submit and you see that he is going inside and is printing form valid so he is going inside of this condition because our form is valid now let's also access here this email which we have put inside of our field and therefore you can simply access here this email field and this means i have created here in the state this email field which we also need to wire up with our text form field and therefore you have within your text form field a property which is called unsaved and here you can then get the value of this text field and you simply put it then inside of our state and now you can click on the submit button and you see that he has not put any value inside even if we have here in our email field a value and this is because within our text form field widget the unsaved property is never called and therefore also never the new value is put inside of our email field what we want to do is we want to call this unsaved method manually every time if our text form field is valid and therefore we go here back to our submit method and if our form is valid then we also need to call here form save and this is then actually calling this unsafe method and is putting the value inside of our email field and now if we click here on the submit button you see that also the email field which we try here to print to our console is also having the real value which we have put here inside let's also sum everything up so you learned how to use a global key and with this global key you learned how to access the state of a stateful widget 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 you

Channel: Johannes Milke

Views: 11,430

Keywords: flutter keys, when to use keys, what are flutter keys, global keys, widget tree, fluter widgets, stateful widget, where to put keys in your widget tree, globalkey, gds: yes;, flutter tutorial, flutter global key, flutter state validations, flutter, flutter widgets, using keys in flutter, when to use keys in flutter, use of key in flutter, flutter globalkey

Id: jlZ8GV_3nnk

Length: 10min 28sec (628 seconds)

Published: Fri Mar 12 2021