Forms and Validation in #Flutter App | #DevKage

hey guys welcome to Channel Def Con in this video I will show you how you can use form widget to create simple forms and get user editor I'll also show you how you can put some simple validations in place to make sure that all the invalid input gets filtered out so let's get started first I'll replace the center widget with a container inside this container I'll search for visit as the child and since I will be needing multiple input fields in this form I'll add a column message as the child of this form inside this column let's add a text form free widget I'll use this field to get user name from user and to indicate that this field is for user name I will set the decoration property of this widget as input decoration as you can see input decoration has many properties and one of them is label text and set the label text as user name if I save this code you will see a input field in the app with label text as user name this looks pretty basic right now so just to show you how easy it is to make this field a little fancy I'll use the border property of include decoration and certain outline input border will its border radius as 20 and as you can see now the user name field has a rounded outlet I'll also quickly add padding to this container so that the input field does not stick to the edges just like the label text within links the hint text property to display a hint in the input field when user taps on it as I said there are many other properties Princip decoration that you can play with and get the desired decoration so now that we have input field let's see how we can add validation to it for this I'll use the validator property of text form field this property needs a function which takes the current string of input field as input and returns an error strings if any of the validations fake I will create a function here with value as a string in in here I will check if the value string is empty if it is empty I'll return an error saying name cannot be empty and if that is not the case then I'll return null which indicates that all validations passed now this validator has to be called explicitly by us where user submits the fault but to quickly show you how this works and set the auto validate property to true here basically this continuously keeps on running the validation on this text field if I save this you can see that there are message gates displayed below the input field if I type anything in this field the message will go up and it will come back if input is empty but we want to run the validation explicitly so I will remove this or to validate propriety to run the validation explicitly I'll use the floating action but we'll quickly I had a blank on press function and set the child for this button as done icon now to execute all the validation functions of all the text form fields inside this form widget we need a form key this key will help us to uniquely identify this form and will also allow us to get the current state of the form for this I'll create a variable called form key which will be a global key of type form state next I'll set this form key as the key property of this form which and now in the unpress function of floating action button we can write form K dot current state dot validate this we'll go and execute all the validator functions of all the text form fields inside this form so if I click this floating action button we will see that error message we can also have multiple validations for a text field for example I can add an else if condition here which will check if the length of input string is less than 3 if it is less then I'll return another error message saying that user name must be at least 3 characters long and now if I put a really small user name and hit the done button you will see the new error message now let's try to add some more input fields to this form but before that I'll quickly extract out this form widget as a method called wave form to add more fields I simply duplicate this first field and use this one for password input so I'll make necessary changes in the label text and validator function right now these fields are sticking to each other so let's wrap them in writing budget this looks a little better now now I'll duplicate this password field to represent the confirm password label text for this will be confirm password as well so now we need some way to ensure that the input in password and confirm password field are exactly the same for that we will need some controllers I'll create two text editing controllers and name them password controller and confirm password control next I'll set these variables as controller for both password fields now I'll go to the validator function of confirm password and remove all these validations now here we can compare the input value string with password controller dot value dot text if they are not equal then I'll return an error message saying passwords do not match and now if I click on the submit button we will see errors only for username and phosphor this is because confirm password and password are like and they match so no error will be shown for confirm password next I'll give a valid user names and an invalid password and now you can see that we get error for password length and password mismatch if I give a valid password you will get error only for password mismatch finally if everything is valid all the errors will be gone so that is how validations work in form since we have password field here it does not make sense to show them in plain text so for that you can set the obscure text property of text form field to true this will make sure that the inputs in password field get top square also it is more likely that you would want to perform some operations when all validations pass and for that you can put this validate call in an if set it returns true only when all validations pass to show that I will put a debug print statement here saying all validations pass and now if we check the debug console after pressing the submit button you will see that it prints this debug print statement I'll also like to show you how to change the keyboard type depending on the type of text forcefield for that I'll create one more field before username this one will be to get global number from users now since we know mobile numbers will always be a bunch of digits it will be better if the keyboard just shows digit keys to achieve this you can use the keyboard type property of text for feet here you can specify a text input type from all these available options like email address number text phone and many more so if I set this before and save this you can see that when I click on the mobile field the keyboard shows only digits one important thing that I forgot to do here is to destroy the controller's basically you have to free up these controllers when the state is destroyed for that I lower right the dispose method and in here I will call dispose on both the controls so that was all I had for this video I hope this will help some of you to design cool forms and proper validations as always all the code is available in the github repository linked in the description so check that out if you miss something if you liked the video hit that like button and consider subscribing for more such content

Channel: DevKage

Views: 6,840

Keywords: Flutter, flutter widgets, devkage, DevKage, DEVKAGE, Devkage, android, ios, app development, mobile app development, android app development, ios app development, Form widget, flutter forms, validation, validate forms, form validations in flutter, validations in flutter, signin form, login form, sign-up form

Id: _x7gWlUHx0s

Length: 7min 47sec (467 seconds)

Published: Tue Jul 07 2020