Flutter Tutorial - How To Use Form and TextFormField [2021 UPDATE]

with the form and text form field widget you can validate fields and show error messages and in this case you can then validate emails passwords and usernames and after you can click on submit and if the email is correct then it is validated and it will hide the error message if you are new here subscribe to my channel and make sure to watch this video till the end in the last tutorial we have already created three text fields and i have also created here this button and if we click on it then we want to validate the content of our text fields if you never have done anything with text fields i recommend to watch also the last tutorial which you can find in the description box of this video here basically we have here three text fields and they have some decoration and an unchanged handler and every time we get then this what the user types here inside and this will be then stored into variables so in this case for the username it will be stored here within the username string now that we want to validate these text fields we need to simply change the text field to a text form field and we do it also at the other locations for the email and password then we go to one of our text fields so for example this username and we add here validator and here with this value we get then the text of our text field and now we simply check here if we have at least four characters and if we have not four characters at least in this text field then we return here string otherwise we return here null and if we return here now this means that this text field is valid and if we return here a string then this means that we have an error for our text field and that the user needs to change this text field and needs to put here for example for characters at least inside the next thing we want to do is if we click on this button then we want to execute this validator and what we do there for is we go here to our build username and we simply wrap this list view around a form widget so simply put your form widget around and then you can set here inside a form key and this form key we create here at the state level so we create a new global key and here inside we put the form state inside and the form key now enables us to access here the form state and this means that we can access then all these text form fields here inside and then we can access here these validator methods which we put inside of our text form fields therefore simply copy here this name and we go then to our submit button and if we click on the submit button then this unclicked handler is called and here inside we simply call then the form key and get the current state and then you can call here the method validate and this is the magical method which basically check here all of these text form validators and if this validator is not returning now then it simply shows the error message in this case this message here so let's try it out i click here on the submit button and you see we get here the error message and this is because this validator doesn't return null it simply returns here this string and if we have here at least four characters inside then it will return here the null and the error message will also go away again and this is everything done by the validate method automatically for us and now we can simply check here if it is valid so in this case if the username is valid and then we simply want to call here the form key current state and here we want to actually call the save method and the save method will call then all the unsaved properties within our text form fields so you can simply change this on change to on saved and you also do it here at the other locations and now these unsaved properties are only executed if we actually call here manually this safe method and this will then put the value which we have in this field and put it then inside of this field here at our state level and the last thing we want to do is to actually print the content which we have here in our field so we can simply access here this username field at the top which holds in our username and in this case we create here simply a snack bar where i simply create a text where we put then this message here inside with our username and we also give it some background color and then we simply call here this scaffold messenger of context to actually show our snack bar if the scaffold messenger is not working you can also call here scaffold instead and now if you click here on the submit button then you see that this username is put here to our snack bar and we also can change here the username and then the new value go here inside however if we have here less characters then this is not executed because it is not valid and therefore this code is not executed now we want to look at the email validation and also the password validation let's start with the password validation so we create again our validator property and here we get again this value of our text field and then we check here that the password has at least seven characters and if it has not these seven characters then we return here this error message otherwise we return here null for the successful case now let's try it out so i have here at least seven characters inside and then everything is fine however if i have here less characters inside then we also show you this error message and now if everything is here valid the username and the password then we can also show here next to the username the password and now if i click here on this button then you see that we have the username and also the password within our snagbar now we also want to add here for our email field this validator and here inside i have then an email pattern which checks if our email is valid and this is what you find in the internet and from this pattern we create a regular expression and then you can basically check if the regular expression is not matching here and this code here basically checks if our email is valid so the content of our text field should be the same as this pattern here and like you can see within this pattern we have this add symbol and you also need to have a dodge and so on so there is like some things which you need to have within a valid email and in the case that it is not valid then we return an error message and it says enter a valid email otherwise we return here null for the successful case back on our submit button we also add here after our password again this email and now we can click here on submit and you see that the password and username are valid however this email is not valid and then he will simply call here this error message enter a valid email therefore simply add here a valid email and then click again on submit and you see that we have here now the successful case and it is also showing in our snack bar lastly i want to show you some more tricks what you can do so within your form field you have this auto validate mode and you can set it to auto validate mode on user interaction and what this is doing it is basically updating here our ui automatically if we change here from one stage to another state then he is simply doing it without the submit button and changes here the error message also puts you the successful message inside and if we don't have this here inside and i change here then this text you see there is no change we always have to click on the submit button to actually have here the change directly in our ui and this is what you can put inside if you like another thing what you can do is to put for example in your text form fields a max length and if you do this then this year can only have at least 30 characters so we cannot have more characters than 30. and with this you can make sure that the username has maximum 30 characters in case we have an error message displayed for example for our username you can also change the color of this arrow and therefore you simply call here the error border within the declaration of your username field and here inside we set for example a border site with a purple color and you also need to set here the focused error border and here you also can set a purple color inside and lastly you also need to change here the arrow style so this is about the text which is then displayed here this username for example and also this one this will be also then in purple and now if a hot reload you see that everything is in purple and also if we have this focused therefore we have put this here inside it is also in purple by the way if you want to get here this whole source code of this application you can get it with the first link in the description and with the second link you can get access to my flutter courses where i teach you how you can become a better and more efficient developer another thing i want to show you is also that you can add here multiple validators within your validator property so let's say i have here this username put inside and the password and i click on submit and then you see enter a valid email if you don't like this error message then you can also have for example this case for an empty case where you simply add here another error message like enter an email or something and now if this email text field is empty then we return here instead this error message so let's try it out i click on submit you see we have this error message and if i add here one character at least then it changes here to this error message now every time if we click here on the submit button then there is still this keyboard open if you don't like this behavior you can also put here within your submit button this focus scope on focus and this will then unfocus all the text fields and will also hide the keyboard and now if i click here on submit it will then hide the keyboard so this is also what you can do and this is a preference i don't like this here for this case however you can also put it inside 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] you

Channel: Johannes Milke

Views: 15,415

Keywords: flutter, flutter form, flutter form example, flutter textformfield, flutter text form field example, flutter textformfield example, flutter form validation, flutter design, flutter for beginner, flutter for beginners, flutter tutorial for beginners, flutter input field, flutter input text, flutter validate form, flutter validate input, flutter form validation tutorial, flutter text form field, forms in flutter, form validation

Id: 2rn3XbBijy4

Length: 11min 18sec (678 seconds)

Published: Sun Dec 27 2020

Reddit Comments

[u/JohannesMilke]

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

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

Let's use TextFormFields & Forms to validate our TextFields like email, password, etc. in Flutter.