Form Validation in Flutter

Form validation is an important part of mobile application. Many fields required validations on the Mobile application. We can add validation of TextEditingcontroller.

The input is verified in your form's submit function, which is called after the user has filled in all the required information. However, each TextFormField itself is subject to the condition using a widget name validator.

The Validator widget accepts a function with a parameter that includes the value of a single input and then tests the condition specified in the validator function. Because there can be numerous inputs, a key of type FormState is used to connect the widget tree to the elementary tree.

Step-by-Step Implementation

Step 1: Create a New Project in Android Studio (File >new flutter project)

Step 2: Adding material package

Import method the runApp method in the main function call first while run the application.

import 'package:flutter/material.dart';

void main() {

runApp(RunMyApp());

}

Step 3: Creating a stateless widget

We can create a stateless widget that contains MaterialApp widget,AppBar,etc.

class RunMyApp extends StatelessWidget {

const RunMyApp({super.key});

@override

Widget build(BuildContext context) {

return MaterialApp(home);

}

Step 4: Validation of text editing controller

Take two text fields one is Email and second is password.

Email address fields

 if (value!.isEmpty ||
     !RegExp(r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+\.[a-zA-Z]+")
         .hasMatch(value)) {
   return 'Enter a valid email!';
 }
 return null;

Password fields

 if (value!.isEmpty) {
   return 'Enter a valid password!';
 }
 return null;

Step 5: Final code

 import 'package:flutter/material.dart';

 void main() {
   runApp(HomeScreen());
 }

 class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
      theme: ThemeData(
        brightness: Brightness.light,
       ),
     );
   }
 }

 class HomePage extends StatefulWidget {
   @override
   _HomePageState createState() => _HomePageState();
 }

 class _HomePageState extends State<HomePage> {
   var _formKey = GlobalKey<FormState>();
   var isLoading = false;

   void _submit() {
     final isValid = _formKey.currentState?.validate();
     if (!isValid!) {
       return;
     }
     _formKey.currentState?.save();
   }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: Icon(Icons.close),
      ),
      //body
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        //form
        child: Form(
          key: _formKey,
          child: Column(
            children: <Widget>[
              Text(
                "Login ",
                style: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold),
              ),
              //styling
              SizedBox(
                height: MediaQuery.of(context).size.width * 0.1,
              ),
              TextFormField(
                decoration: InputDecoration(labelText: 'E-Mail'),
                keyboardType: TextInputType.emailAddress,
                onFieldSubmitted: (value) {
                  //Validator
                },
                validator: (value) {
                  if (value!.isEmpty ||
                      !RegExp(r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+\.[a-zA-Z]+")
                          .hasMatch(value)) {
                    return 'Enter a valid email!';
                  }
                  return null;
                },
              ),
              //box styling
              SizedBox(
                height: MediaQuery.of(context).size.width * 0.1,
              ),
              //text input
              TextFormField(
                decoration: InputDecoration(labelText: 'Password'),
                keyboardType: TextInputType.emailAddress,
                onFieldSubmitted: (value) {},
                obscureText: true,
                validator: (value) {
                  if (value!.isEmpty) {
                    return 'Enter a valid password!';
                  }
                    return null;
                 },
               ),
               SizedBox(
                 height: MediaQuery.of(context).size.width * 0.1,
               ),
               MaterialButton(
                 padding: EdgeInsets.symmetric(
                   vertical: 10.0,
                   horizontal: 15.0,
                 ),
                 child: Text(
                   "Submit",
                   style: TextStyle(
                     fontSize: 24.0,
                   ),
                 ),
                 onPressed: () => _submit(),
               )
             ],
           ),
         ),
       ),
     );
   }
 }

Step 6: Output of above example

Happy coding!

in Mobile

365Bloggy June 3, 2024

Form Validation in Flutter

Step-by-Step Implementation

Step 1: Create a New Project in Android Studio (File >new flutter project)

Step 2: Adding material package

Step 3: Creating a stateless widget

Step 4: Validation of text editing controller

Step 5: Final code

Step 6: Output of above example

Share this post

Tags

SUBSCRIBE THIS FORM

Recent Posts

Our blogs

Archive

Follow us