Flutter Form Validation

3 min readAug 8, 2022

Flutter Form Validation

Structure (Flutter Form Validation)

Flutter Form Validation. Flutter has 2 Powerful widgets StatelessWidget and StatefulWidget create a simple Stateless or Stateful Widget and return your Scaffold here. After this there will be a Column and two numbers of TextFormFields email and password. And the Column will be wrapped in the Widget named Form.

Explaining Code

The TextFormField looks like

TextFormField()

in its parenthesis there is a property validator which is a Function and it’s return type is String.

validator: (value) {}

in its body we will check our conditions to validate this FormField the way we want. And there are many ways to validate a form.

Validation of Email

If we want to validate the email field we want the conditions for the field like (This cannot be empty and checking for email validated syntax). First we will check how to validate the syntax of the email. For this we have a RegExp pattern text.

RegExp pattern to validate email syntax :

r"""^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+\.[a-zA-Z]+"""

Store this in a variable. And check the condition in the validator property of the TextFormField Widget and also for (the field cannot be empty).

validator: (value) {
 if (RegExp(emailRegex).hasMatch(value!)) {
   // return nothing
 } else if (value == null || value.isEmpty) {
   return "field cannot be empty";
 } else {
   return "email is not correctly formatted";
 }
},

And this is it for the email field.

Validation of Password

Same like the email field the 1st condition in password validation we want is (field cannot be empty and the 2nd is if characters were less than 6 so we will show the error message).

validator: (value) {
 if (value == null || value.isEmpty) {
   return "field cannot be empty";
 } else if (value.length < 6) {
   return "must be at least 6 chars";
 } else {
   return null;
 }
},

And this is it for this password field.

Next create a generic type variable like :
Note : This will be in StatefulWidget.

class HomePage extends StatefulWidget {
 const HomePage({Key? key}) : super(key: key); @override
 State<HomePage> createState() => _HomePageState();
}class _HomePageState extends State<HomePage> { GlobalKey<FormState> _formKey = GlobalKey<FormState>();
 @override
 Widget build(BuildContext context) {
        ...

And then pass this _formKey in the required property key of Form Widget in which our Column of two Fields is wrapped.

Form(
 key: _formKey,
 child: Column(
   children: [
     ... Fields...
   ],
 ),
)

The next step is when we click on the Submit button If forms are correctly validated then we will navigate to the WelcomePage otherwise we will receive the error messages.

ElevatedButton(
   child: Text("Submit"),
   onPressed: () {
     if (_formKey.currentState!.validate()) {
       Navigator.push(context, MaterialPageRoute(builder: (_) => WelcomePage()));
     } else {
       return null;
     }
   }),