How to create and validate forms in Flutter

hello so in this video we are going to talk about how to create a form in flutter so creating a format flutter is pretty easy you don't have to install any extra packages or anything it's already built into the sdk so i created a new branch in my git repo here i created a screen called form screen so in our main.dart here we're just importing that and using it here i changed the title here and i changed the color to teal as you can see so so for our form screen i just have a scaffold with a app bar that says form demo and i have a container for our form so it can look a little bit better so let's get started creating our form now in our forum screen state we're going to add some fields to our state here let's create i'm going to do string we're gonna create name email uh password i'm just doing it this way so you can get a feel for different types of data in your forums so and the string url string i want to do phone number and i'm going to just create one for numbers i'm just going to use calories for some food so string and calories next i'm actually going to create something called a form key or it's a global key but um the class is a global key so we do final global key and form state so basically we're creating a key to hold the state of our form so this is basically a reference to our form itself so form key equals oops equals global key same type here so form state okay i'm actually going to create a few different [Music] functions here i'm going to create a function that returns a widget and i'm going to call it build name field so this naming convention is normal for flutter apps so when you're programming in flutter if you want to have a function that returns a widget for your widget tree you normally want to start it with the word build just to be consistent with the standards and right now i'm just going to have it return null and we're going to do this five more times and i'm going to call this build email actually let's leave out the word field just to make this quicker build email build password and build url build phone number and build calories so we have these six functions now that return a widget so we're actually going to add these to our actual build function here so we're going to first create a child of the container here and the child itself will be a form so there's a form class and flutter that we want to use for this and the form itself takes in a child so the child is going to be a column because we're going to have a column of text fields so column and for the column we're going to have everything centered so we want main axis alignment and then we do main axis alignment dot center and then for this column we want the children of the column so we have an array of widgets that we have for our children and we want to add in our functions here so we want to add in our build name and we want to add in our oops build name and we want to add in our build email and want to add in our password we want to add in our and you can kind of see how this goes we're just um adding these into a column here okay and now we actually want to put a button at the bottom of this so we want to we're going to put a space in here one of the best ways to add extra spaces to your widget tree is to use something called a size box size box so this takes in a height so you can see all the fields here it has a key width height and child for this we're only going to use a uh height to space it out a bit so you can also use the padding widget too if you want to so height 100 and we want to put a i'm going to use a raised button here and a raise button takes in a one pressed which we'll come back to i'm going to use the child first and the child is going to be a text widget and the text will take in a string we'll call it submit and then we'll add a style to this which you can add like this text style style and then we'll do text style and then color and we're going to add colors dot i'm going to say uh just blue this would be the text color itself not the button color blue and then we want to add a font size let's do 16 i think might work so for one pressed here we're going to have a arrow function but we're not gonna do anything with it yet so okay so we have that do that here to make it easy to read okay so let's save this and let's reload our app okay so we have an error here build phone number oh i have this twice build phone number uh missing one okay build calories so we need to add something to our functions here because if you try to run this with null values then you'll get an error saying that you cannot have no values showing in your widget tree for your children here so and we're going to return a text form field so this is the widget that you'll use for text forms and there's a few different options that we want to add to our text form field so we want to add a decoration so a decoration lets you do things like adding a label to your field so let's add in input decoration this is what this takes in and in here we add a field called label text so there's label text and label style so we do label text oops labeled text and we want to call this name and then we have a field called validator this takes in the actual value so it's always a string string value and we want to first check to see if it's empty or not so if this is empty so we could say if value so dart has a getter built into the string class called is empty if it is empty then we actually return the string that we want to show in the validator so we return a string and we're going to say name is required so that's pretty much it for the validation here um there's one more thing that we want to add here so inside of our text form here we have a parameter that you can set when it's saved so when the form is saved you can call one saved so you can see there's a few different ones here there's one tab on the field submitted one editing complete we're just going to focus on one saved that's one that you always use so unsaved takes in the same value so here we can say what we want to do with that value so here we actually want to set the state so we can say underscore name equals the value so this is a really easy way to set the state in your widget so we're in our state here we're saying underscore name equals value so let's go down to our build function here we're actually just going to take this out let's just uh comment these out for now so we can see what this does this and reload so you can see now we have one field with name and we have submit so if we type something in to our field here and press submit nothing happens right let's see what happens if we have nothing in our field so press submit and you see that nothing happens right so that's because we're not actually telling our form to use the validation that we've created so there's something else that we need to do for our button and our button we need to implement the one pressed method here so we have one pressed right so the way that you tell your form to validate is you use the form key so we're gonna have a condition here saying if not underscore form key the same form key that we used above that there's a few different options here there's current context current state and current widgets so using the form key we have access to the widget the state of the forum and the current context so we use formq.currentstate and from here we can call a lot of different methods but we're going to focus on the one that you'll use the most and that'll be validate so this is a function if this happens then we want to just return so if our validation is not successful then we return running this function itself will cause your form to validate itself which would actually show the messages that we define in our validator field here so we'll see how that works here in a second so what do we do if our form is valid in this case we want to save the form so if our form is valid that means that this doesn't happen this line doesn't get returned here so if that doesn't happen then we want to save so we do underscore form key dot current state and then in here we also have a function called save so you can see it saves every form field that is a descendant of this form so this would be a point where you would want to actually use the data that you have in your form so when we write this line here from key.currentstate.save the unsaved method of each text field gets called so once saved only gets called when you type the dot saved method of the form so that's something to keep in mind so when we type this line here our state should be correct we will print let's actually just print all of these now so let's do print name print email it's gonna copy and paste this a few times okay so you'll only see the stuff printed in the console if all of our validation is correct so let's comment these out so we can test our name here by itself so i think i forgot to do one thing i forgot to add the key to our form here so in order to have access to our key to our form key uh we have to put the key field into our form so it'll be the same key that we used or that we created up top so without this then the form key would be null and you would get a error here so so don't forget to add the form key to your app or to your form okay so we have this right so let's run this and we'll type something in here or something valid so submit you can see that we printed that out here and it's saved so let's see what happens if we have null in here so let's submit you can see that we have a red area here name is required so that means that this validator got called and this line was true so we actually just returned from this and one saved never got called so our name state never got set in our app so that's something to keep in mind like keep in mind the flow of your forms like how this all works together it's really nice how google did it with flutter so i'm really happy that this is all built into flutter so it's pretty nice so let's add our other fields here we'll start with the email so we're going to copy and paste this because the format will be the same but we'll change a few things so we'll call this email we have a validation we're gonna use the same validation for this so we're gonna call this email right so there's a class in flutter called regex or reg expression to validate a string so if you're new to programming a regular expression is just a string of characters that lets you match against a certain condition for a value for our email here i'm going to say if not and then we can say reg express so reg express is the class name here and then you actually put the regular expression in here so it'll be a string of characters here i actually already know what this is i'm gonna copy and paste it from a different file and i'm gonna just put it into here most people don't memorize these because you can see why but uh whenever i need a regular expression i just go to google and type what i'm looking for in there and i usually find it pretty fast so okay so we have the expression here right now we do dot and then there's a lot of different methods for your expression here we're just going to use has match and then the input for this expression will be the value okay so if this match is true let's get rid of all that okay so if this is a match or sorry if this is a not a match so that's what the not here is for then we want to show an error so we want to say return i'm going to say please enter a valid email address something like this that's fine that should be it for this oh we actually want to do return null here too so don't forget that validator has to return something so that should be it for our email so let's go down to our password so for our password we're gonna have let's return text form field let's copy this so we're going to call this password and want to say password is required and we're going to use password i think that's all i'm going to do for that it's going to be pretty simple for url we're just going to have kind of the same thing here actually up here i'm going to add one more thing you won't be able to see it on the simulator here but we're gonna have a keyboard type so we're gonna have keyboard type and we're gonna call it this takes in a text input type so text input type and then you have a lot of different options here this is why i created a lot of different fields for our form we have visible password so i'm going to use this one here and that's pretty much it so and for this one i'm going to use keyboard type i'm going to use url so speed url url and url okay so you can kind of see how this goes very similar stuff here we have phone number and phone number and there's a text input type for phone number here so phone and so for calories this one will be a little bit different so for this one we want to have i think number yeah number and then calories and so we have our string value do calories for this one i'm going to change the if block here so i'm going to say if calories actually before that i want to set it to an ant so i'm going to ink calories there's a way to parse data in dart which i like a lot you just say if you want to parse it to an ant for example you say end you're going to pass it to a double you say double but i'm going to say int dot try parse instead of throwing an error like you would normally do with like a parse and say java for example tripars returns null if it cannot be parsed correctly we could say tripar's value calories would always be either null or it'll be a number in this case we can say if calories is equal to null or we can say if calories is we're gonna say less than or equal to zero then we're gonna show a string here we're gonna say calories must be greater than zero it's a little bit different than the other ones but it's similar to so if our calories is no then we show this if our calories is -5 then we show this too so so we can uncomment these and we'll restart the app and you can see now we have all of our fields here so let's just press submit and see what happens with our form so you can see we have six different errors we have name is required but i forgot to add the email here for this one okay so password url phone number is required calories must be greater than zero so if i put something in here that cannot be parsed to a number and press submit we still see the error here but if i put something in here like five we don't get the error so let's put in all valid stuff here actually for the email so let's press submit first for the email let's put in something random press submit please enter a valid email address so it can detect that we don't have a valid email address so we can put in something like uh like an actual email dot com and submit now that is valid press submit not valid valid okay so we can also add in something in our text form field we could say max length i'm going to say 10 for name so let's restart and the cool thing about the flutter text form field is that it shows you the character length underneath it so as you type and then as we go up to 10 you can see that it doesn't let you type in anymore past 10. so i really like how flutter does the text form fields and the forms in general it's really easy before we leave let's put in all valid fields here to see if our unsaved method gets called so password url remember we don't have a regex for all of these so any string should be valid for these except we need a number for this one so let's press submit oh yeah we're not logging the other things yet so let's uncomment these save reload so let's put in a lot of different things here and press submit and you can see that all of our print statements are getting outputted here so yeah this is how you actually create a form with flutter it's extremely easy it's a lot easier than react native so we're getting these warnings here because we're not returning something i forgot to put an extra return statement in here so this will be return now and now you can see that goes away so yeah uh i hope this all makes sense and we will be using forms a lot in flutter going forward so you should always return to this video if you forget something on forums it's very easy very straightforward so yeah stay tuned for future videos i'm going to be doing a lot more videos on flutter i'm going to start doing maybe one video on flutter and one video on reacts native every week and we'll see how that goes so yeah thank you and happy coding you

Channel: The Flutter Factory

Views: 71,842

Keywords: cross platform app development, flutter app tutorial, how to create flutter apps, flutter app example, flutter routes navigation, google flutter tutorial, how to create forms in flutter, how to validate forms in flutter, flutter form widget, flutter keyboard input type, flutter regex validation, flutter textformfield example, inputdecoration flutter, flutter form validator, flutter onSaved, flutter email validation, flutter textinputtype, cheetah coding

Id: nFSL-CqwRDo

Length: 22min 55sec (1375 seconds)

Published: Wed Sep 11 2019