Flutter Form Tutorial with validation and Submission

hey dear today we will learn how to create a form in flatter application we will also learn how to validate forms data how to use forms data when everything is okay so here is the demo you will see the air in five fields so first name last name email password and confirm password if I now click sign up you will see there is a validation Eero is showing so suppose I want to fill the data so I want to give my first name last name and suppose a testing email and suppose the password again the confirm password and finally if I click signup you see it navigate to a new page where it issuing successful and I am I can see the forms data and in this tutorial you will also learn how to customize the form phase like these fields are not default style I just did some customization so that it looks like this so anyway let's start coding so here I have created a blank project in my Android studio and I want to remove all the court accepts the import file so and I just remove this my obtained okay and now what I want to do I want to install a third-party library so in this application we need to check that whether an email is valid or not and there is a third-party library named validators in the pop dot tip if you use this library using that you can use this email checking there is not only email checking but also other important essential functions are used in this library so here if you see the documentation you will see there are many essential functions are defined so anyway let's install this thing so I copy these validators and the version number and I went to my Android studio I open my perspective yml and I paste that court after Cupertino icons and save this thing and now I click case gate so it will be installed in this project so now come to the main door dot file and here I want to import that third-party library as well that library name is validators I will type import as validators or validator okay now here I want to create a state lace widget and let create a material app so instead of return this container is written this material app you [Music] and give a body for this widget body and we will use test from widget which yet not defend we will defend that widget at the bottom so basically this test from widget will be a stateful widget so here I will give the name test form okay now to define a form we first have to define a global key so to define a global key I have to type final and I give the name form key and then I have to use the class name global key and I want to the global key basically holds a is state so I want to define that what type of state it can hold so within angle bucket I will use from state Rho bulky basically a unique key which differentiate the widget to all other widget in an application okay so using this key you can differentiate and access the widget where you use this key as a key so when we define a form we have to pass a key and according to the documentation official documentation it says use a global key for the from so that you can use the from key or global key to access that from so this is the main reason why we need to define a global team okay and now let's define a from inside this build method so two before defining a form I just want to use a hub media width calculation for styling deform field so here I am defining a hub media with so basically if your application runs in different device you can access that device weight by using this media query object okay so what I want I want to know the half size of the width because we need this information to design our from or to design a firm in flatter application you have to use the form widget so here is the from with it and when you define a form widget you have to pass a key so here we are going to use this form key which is a global key okay so we passed this from key and now let's define that child [Music] and then I will use a child and here I've been used text from field so if I run this program I can see the output in the iPhone access simulator so currently you are seeing a from field a text field so here I can type there but we do not want to use text field like these so we want to further customize it so basically we are going to use a first name last name email and password instead of using this text from field directly within our form widget I want to create a separate class so that I can easily pass some parameter and customize the form field so let's define the class you so let's define some parameters or properties for this for this custom class so basically I defined five properties in this class one is the hint edge which is a string and then to function validity and onset which I can pass from externally when creating an instance of this class and there are other two parameters is password and is email so these properties we need to customize the text field so let's define a default constructor and I want to give default value for each password and easy mail to false now let's override this bid method [Music] so basically I defined a text from we feel widget in here as a child and where I am using the decoration input decoration widget to define some more property to style this text form field and here hint text basically is a property of input decoration so when we pass and hint text so if currently you see the text if I remove this text cleared this text you will see that there is no nothing is shown here but when you pass a hint test it will shown a text field so that you can understand or user can understand that what need to input and these other fields are basically two each style this text field text field has some more parameters as well for example if you want to use a text field as a password so you can use that obscure text property so here we will be used this is password property if it is true then we will use two otherwise it will be false and when we need validation that if the user gives the correct at or not we need to use a function which function we will be using is a validator function which will be passed externally so we'll use that validator function here and when everything is okay we will use the concept function to save that data and finally there is a keyword type important parameter so is if there is an email then we want to change the input so we will change the keyboard by using the test input type this object email address otherwise we will use normal text keyboard okay so our custom my text form field is done I will discuss further when I will use this inside this form field so now what I want to do instead of using this text form field directly in the form I want to remove this thing and I want to use my the custom object I created that I want to use that as a widget in here if I save this thing you will see now this text field looks different okay so here in the design in the decoration you see there is a hint text content padding border so if I remove this border thing let's see what it's shown you will see a border in under this text field right but I do not want to use that power that's why I give that border input border dot not also if I I do not provide this field or I use fill equals false you will see the form field does not have any field color but if you just use it true and pass a color as a field currently we will see the field color in here and the content padding is basically used to the text so that the text looks like inside the text filters is the content padding okay now here if I want to pass a hint text when I created this my text from fill widget I did not pass any properties right now let's pass a hint text first name and save this thing you see now it is showing first name but when I type something that first name in text is gone so at this moment I do not want to pass other properties like validator on said I will do that later so let's create another field so I copy this container thing and paste it here and I use the hint text last name so that I can see that last time is showing at the bottom but I do not want to use last name at the bottom I want to use first name and last name at the same row so to drew that I just have to use the row widget and now if I give this row it shows in the same row but all I also use a alignment so in the row I want to use the cross exist alignment for the column basically that cross axis alignment is start so that it looks at the top okay so our first two field first them and last time is done so let's get some other fields like email and password field so to do that I just copied this my text field thing I do not need that container I can use that my text field directly inside this column so here it is so my text field from and here I want to use email okay so I want to pass email and if I save this thing you will see there is an email but here in the in our text field which we define the my text form faceless you see that when we want to use this table as an email we should pass an is email property to to true because when you pass this email property to true and here when I type I basically type in the keyboard but I want to activate the software keyboard so to do that in iOS simulator I have to use this togar software keyboard so here you see this normal keyboard is showing right but if I pass this in text and then is email to true and save this thing and let's change this thing and you see that when I move my cursor to email here their bottom is a at sign is added so this is the benefit and this this feature basically looks different in iOS and Android as well now let's create two more our fill one is for password so here I want to use password in-text password and in this case it will be is password true and if I save this thing is you will see there is a password field but normally when you are creating a signup form it's better to use two password field one is password and another one is the confirm password so copy this thing and paste it here and write on from password so that user has no chance to miss type their password and finally what I want to do I want to use a signup part on I want to create a signup button and in that case we do not need to use this my text form field we want to use a raised part on widget in this case and if I save this thing you will see there is a sign-up button but it looks disabled because I did not give any unpressed property okay so if I want to do that what I have to type I have to type after this child on pressed and in this case I do nothing I just use a pinchy statement pin sign up I save this thing and now you will see that the bottle looks blue that means this button has an on press if I click this sign up you will see in the terminal there is a sign-up level is showing so basically our from fields and a button design is done when I want to click this signup thing I first want to validate all the data and if there is a need or I will I want to show user the eros and if everything is OK I want to redirect user to a new page with the data basically in real application we want to use that data to save in server using API or saved in offline but in our demo I just want to redirect user to another screen where I want to show that data ok so to do that let's create a another a screen and before that as I want to pass all of this form data to another skin for that I want to create a model to easily transfer data from my skin twisting so to do that let's create and dart file here and I want to give the name model dot dart and here let's define a model so our model is done we are basically creating a simple class where we can pass first name last name email and password and who all are these named properties and by default these are optional so anyway when I will pass the Fromm's value to another screen I will use an instance of that object so let's create the another is into another dart file and in this case the file name will be result so let's define the result in skins so our radar screen is done so when we will create or instantiated result skin from our main skin we will pass the model instance and from here in the build method we are basically using the first name last name email and password from the model field to show in the skin so our result page is done and now come in the main dot tart and import this to other file so import model dot dot and also import result dot dot so let us define more functionality in this form okay so at first what I want to do I want to validate the forms that are suppose if there is no first name is provided when I want to click this sign up I want to see that if all the fields are provided that's why I want to use a validator function so to do that I can exhale use the my text field and here after the first name I want to use the validator property here if you check this my text form field you will see that I can pass a valid function right which is stored in the instance of my text form field and which will be basically used when you create when we create this text form field we are basically using that validator function if there is no validator function is provided nothing will be used in here so we want to pass that validator function is in here so in the validator function or in the parameter you can access the value so that means if we want to access the value in this function parameter you can exit that using easting and any reference name so in this case we are using this value so let us define this function and this this function basically this anonymous function is passed as a reference in this validator property so that validator property used to validate this text field so in this valid function let's write some code so basically in this code what we are checking that if the value is empty then we want to show you that that enter your first name so currently the value is empty right but if I click sign up nothing has happened because I also need to define these sign up on pressed method if I want to validate this form face what I have to do let's remove this print sign up for this moment I want to access this from right so if you when you are creating it from you remember we created a global key so that is from key which is passed as a key in this form so using this key we can access the form so to do that let's define if from key in the if logic dot current is dead all of these fields are under or descendants of this form widget right descended of this from widget so that if when I want to access the current state of this form so when flutter develop this from it will automatically develop a form is state and you remember that when we created this form key we defined that the instead of that a key will be a for mr. so we can exit the current state of this from using this key from k dot current is dead so if any text field is filled or not filled we can access that so we want to exit the state by using from key dot current state and now we want to call the validate method so valid method means when you will call that from key dot Karen is the dot validate it will call all the validator method defined in the fields so in our case dot text from field so here we define a validator function right so this validator function will be called when we will call from key dhadkan instead of validate so now let's save this thing and run and after that click sign up and you see it is showing if I click sign a petition enter your first name because when this considered validate function method is called this validator method in the first name text field is colon here it found that there is nothing is provided that means the value is emptied that's why it is showing written enter your first time and it is showing in the bottom so if I type something like my first name Muhammad and click sign up again you will see that validation error is gone one thing you have to remember if the any validation leader you must return and show a information that what is the ero and if everything is okay you must have to return now and every validator function if provided is a return is returning null that means all the validation is okay then this if condition will fulfill and then you can use the save that data but right now we did not define that method we only want to define the validator method so now let's define the validator method for other texts from fields I just want to copy this validator property and method and want to use in the second case where I want to just use change the first to last okay so now if I remove this thing suppose for example signup you see now it is showing two validator field love integral first name interview last name in case I provide the first time and click sign up so the first one is gone and if I want to fulfill the second field you will see the second validation will also begun so now let's define the validation field for validator function for other text phil' as well so I just copy this validator property with the function and paste it in the email for the email text field so here what we want to do we want to check that if the text field is a email or not right so to do that I want to use if not validator so here validator means that we do e we install this library right validators validator we give an earlier that validator so we can accept the validator dot is email method is email what we want to pass this value so that means if this field does not contain any email then I want to show user in validation error please enter a valid email okay otherwise put now so now after saving this if suppose I give something not an email and click sign up you see there is an Aurora Schwing please internet valid email but if I want to give a proper email mama dad suppose test.com and click sign up you will see that validation eerily scan so this is the validation is email and now give the password okay so I again copy this validator or I can just redefine the validator myself so here I want to use string value and in the password field what we want we want that password field should be minimum seven so if user give a password the length of the password should be seven so I want to check if value dot length less than seven return if this validation error does not happen I what I want to do I want to use another method form key to exit the form and then I want to use current state dot save method so now you are seeing this new method that formed key dot Kearney State to access the kindest of the from dot save method so when you are using this dot shape method you basically have to give another property in the within the text from fields so here that property will be the onset or here I can also access the value string value so what basically this on sept method is doing right so when we call this from key dot current state dot zip which we will also be used in this here also so when user will click this sign of it and everything is okay we will also want to use this form key that kind pseudo save method to be called in here because when you will use this method it will use the concept parameter so here in the password field we want to use this on set parameter and we want to define a a model instance here Model Model Model and no value okay so here we in the test form we are created an instance of this model class and here when in the password field when everything is okay I mean their password is above seven character so we will call this form T door constant or safe so when you will call this method then if you define on Sept property in your test field that will be called so here what we want to do we want to use model dot password equals value we want to assign this password thing in our model instance password and here in that in in the real Tastefully will see that real text form field there is a unsaved property so there is one validator property which will be called when you will call this current stated validate and if you will call from key door instead of safe so whatever data is fill in this form field will be called using the concept property so if you define the on set property that will be called when you will call current state dot zip okay so here we want when we use this password field we want to save this password in the model toast password so that we can check that thing again in our confirm password so let's define the confirm password validator you so that means at here when in the confirm password failure and to check that if the previous test field is filled or not and if this value is equal to the previous video the that means opposite value is equal or not if both are true okay then what I want to do I want to use return password not match simple so if this value does not match with this previous value I want to show the user a validation your that password not not milk but if everything is okay I just I will just return the now and like this I want to define the vast unsaved property in all the field in the first field first name field also so here in the validator list given the concept string value and here what I want to do model dot first name equals value and let's copy this concept property and the function and use that in the last name as well and here you put the last name and finally in the email also use this on validator and use the email and in the password we basically use already in the concept we already use the on say property in the password you may ask me why we use on say property in the password field and not in the confirm password field basically when you want to compare these two values you first have to call this same method to save the estate value and then only then you can access that property in the next text field that's why we basically all these form key that kind of safe for this password field and when we are checking in the validation in the confirm password we can access that failure by the model dot password otherwise if you do not call this from K dot car nested or save this password whatever use type in here will not be set in your model instance okay so our own saved property and our validator properties are defined so let's run this program again and let's remove all the fields and now let's if I click signup it is showing that there is the yellow box is showing basically this is shown when there is a in production it will not be shown but in the debug mode it is showing because this takes we take some space that's why it is showing so it's not a big issue if I suppose remove this this keyboard from keyboard and toggle software keyboard you will see that the yellow box will be gone so anyway there's not a big issue so here suppose I type Mohamed and I click sign up again you will see this validation is your gun so here I want to type our son and if I click this validation your gun so here I want to give a real email address suppose this calm this variation car and here I want to pass some 1 2 3 4 5 and if I click that arrow gun and if I different different thing not match with this thing and if I click you didn't see it will say that password not me so I want to have I have to give the exact pass or ABC 1 2 3 4 5 if I click sign up then there is no validation error but at this moment what I want to do that if there is no validation hero then we want to see the show the result screen so here in the after form key that canister touch safe when I call this method all the fields value are saved in the model dot instance right and here what I want to do I want to Navy use the Navigator object navigator dot push method to pass that second skin so here in the route parameter what I have to give I have to use a material page route material phase route widget and here in the Builder method I have to define a function so the function will take the context as the parameter and I want to use the air of and here I want to define the second scheme in the result and I want to pass the model as a reference which I created as the instance in here and let's save this thing and now so after if I click signup you will see our second screen that is the results Kim is shown in here and I can see all the data Muhammad Hassan Mahmoud add tez common ABC one two three four five you have to remember that when you want to create a form you have to create a global key and you have to pass this that as a key in the form widget so using that key you can access the form and when a form is created by default flutter will create a form state and will you can access that instead using the global K so from here and when you want to exit the current state of the form so all fields are descendants of that form so when you want to access any of that fields you can use the from K dot canister so when you use this Gator function you can accept the current state and when you will kick dot validate method all the validators you define will be called so if any valid little will return other than null you will see that this signup will not work so if I just remove this R something and click sign up you will see it is showing the validation error but after I fill the field with a real test you will see only then the validation is returns true and you can save the data and you can do whatever you want to use using that data okay so I hope you understand how to create a form in flatter application and also this code is in my github so in the code in the video description you can see the the link for the core so thank you for watching and keep learning

Channel: Mahmud Ahsan

Views: 12,288

Keywords: flutter form, flutter form design, flutter form validation, flutter form tutorial, flutter form field, flutter form ui, flutter form widget, flutter form key, flutter form handling and form validation, flutter form builder, flutter create form, flutter dynamic form, flutter form example, flutter registration form example, flutter form field example, flutter form validation example, flutter form submit, flutter text form field, flutter tutorial

Id: S-nLT3TRJFY

Length: 33min 29sec (2009 seconds)

Published: Sun Sep 08 2019