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!



365Bloggy June 3, 2024
Share this post
Tags
SUBSCRIBE THIS FORM

Subscribe Thanks

Recent Posts
How to add a Snackbar in Android
0 23
Zoom In and Out to TextView in Android
0 14
How to underline text in textview
0 17
Shine Effect in Android
0 19
How to Create Marquee Text in Android?
0 16
Our blogs
Archive