Introduction:

Form validation is a basic process which every app needs to have as a initial criteria, so lets see in the flutter way of doing it.

In this part of the tutorial you will learn a  basic form validation in a simple steps so even a novice can easily understand and know the flutter way of dealing a form.

In general you might have been worked on android form’s previously where the first step is to design an xml file before getting on to the main logical java coding.

Now in flutter this is a combination of design as well as logic together which will help you in further stages of app development where you deal with multiple screens in android.

 

main.dart:

As you all are well aware of the MainActivity in android and this file is same compared.

 

Let’s begin

 

This is the basic step, import the flutter package its the initial step towards app development

 

Declare a void main and this is where the execution of the file begins

 

Declare a class MyApp which extends StatelessWidget

 

Now instead of returning null return a material theme

 

Add a title and design it with using Scaffold and add body using a class called MyCustomForm().

 

This class comprises of the body, extends StatefulWidget

 

Creating a TextFormField

Within textformfield we have InputDecoration using which we can design the textfield according to our requirement, currently we use “hints” to show the field name to the user

 

And then the validaton of the field using a validator, here i am just checking for empty condition

 

TextFormField With both attributes

 

 

Now we will add some padding in between two text fields username and password in vertical

 

then a simple button to process the inputs and show a snack bar

snack bar

 

Add some padding from text fields and declared raised button as shown below

 

We have initially declared a form key in the FirstPage  class on validating the form s a snack bar is show

 

This validation is done on clicking the button using

 

as

 

Full Code:

 

 

 

 

Output:

Show Buttons
Hide Buttons
Read previous post:
Android Kotlin Tutorial on Dynamic List || Dynamic List

Close