Flutter Login Page Validator Made Easy 🔥 .

When you are designing a Login Page or registration Page for your Flutter Application it’s quite important to validate the Fields you are taking as input from the User. By Default, flutter provides two Widgets from which you can take input from the user. They are text fields and text form fields let's take a closer look at text form fields as the Widget has the capability to take inputs and then we can later validate the inputs as per our criteria so that our Login or Registration form is validated at client side beforehand before it reaches to the server for a Possible crash 🤓 .

If you are a Video Junkie then watch the below Youtube Video.

As usual start out with a New fresh Project in Flutter.

And add the Below code in Main.dart file.

Now we will be implementing a Login Page which will have an email input field and a password input field and a button for submitting the Login Form.

As it is a Login Form we have to add a Form Widget into our Code so let's add it. So now in the Scaffold add the body which will contain a form widget and a Columns with Two TextFormFields and a Button you can refer the Below Code block.

As you can observe here , We have an Attribute “Key” in the Form Widget, and it's named as formKey this formKey will be holding the current state of the form like its validation state, etc. So we will be declaring two variables which will hold the keys one for the Form and another for the Scaffold declared as below.

final scaffoldKey = new GlobalKey<ScaffoldState>();

final formKey = new GlobalKey<FormState>();

and Two String Variables (_email,_pass) that will hold the Email and Password Values on Successful Validation.

We also have an Attribute Named validator which has the actual definition of the Validation criteria which the textformField would hold.

Once the Sumit Button is Pressed the code inside the onPressed will be executed.The ShowSnackBar() function will be executed on Successful validation check by executing formKey.currentState.validate().Which will show the SnackBar by accessing the Scaffold Key variable.

This is what the final main.dart file would look like.

So that was a quick understanding of how the Validation in the Login Page works and how to use TextFormFileds for the validation of the input fields.

Thanks for reading. You can always refer my Videos if you want a Visual Outlook of the Topic. See you again thankyou.