Flutter – Email Validator

Email Validation is an important part of every application that uses authentication in the application. If we implement it making our own functions in native Applications will gonna be hard, But Flutter gives us huge plugins that make the code easy. It is easy to implement Email Validation but we have to only add the dependency into the pubspec yaml file and then import it into the main file. A sample video is given below to get an idea about what we are going to do in this article.

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Before going to implement the email validation, it is good to install the plugin in the project otherwise it will raise errors.

Installation:

Add this Package to your project pubspec yaml file.

Dart

dependencies:
    email_validator: '^2.1.16'

Now from the terminal command the line-

Dart

$ pub get

This will install the package successfully with but if you get exit code other than 0 that means there is a error in installation.

Step 3: Now you can import the following package into the main file.

Dart

import 'package:email_validator/email_validator.dart';

Step 4: Creating a validate user defined method which take the input string that passes by the caller method and validate the input string and then print the bool value into the console, we are not making a toast to show the result . This will show in the user IDE console.

Dart

// Method to validate the email the take
// the user email as an input and
// print the bool value in the console.
void Validate(String email) {
    bool isvalid = EmailValidator.validate(email);
    print(isvalid);
  }

Step 5: Now we will create a Text Field and text editing controller that will take the user input email. And also then make a Material Button to call the validate method by using the onpressed property that we defined previous.

Dart

// text field for user input
TextField(
  // text editing controller
  controller: inputcontroller,
  keyboardType: TextInputType.multiline,
  maxLines: null,
  style: TextStyle(
                  fontSize: 18,
                ),
                decoration: InputDecoration(
                  hintText: "Enter Email",
                  border: OutlineInputBorder(),
                ),
              ),

// material button that will
// call the validate method by
// passing user input.
MaterialButton(
               onPressed: (() => Validate(inputcontroller.text)),
               child: Text("Check"),
              ),

Complete Code

This is full code that we created step by step-

Dart

import 'package:email_validator/email_validator.dart';
import 'package:flutter/material.dart';

// main method that run the runApp.
void main() {
  runApp(MaterialApp(home: MyEmailValidation()));
}

class MyEmailValidation extends StatefulWidget {
  MyEmailValidation({Key? key}) : super(key: key);

  @override
  State<MyEmailValidation> createState() => _MyEmailValidationState();
}

class _MyEmailValidationState extends State<MyEmailValidation> {
  // text editing controller
  TextEditingController inputcontroller = TextEditingController();

  // Method to validate the email the take
  // the user email as an input and
  // print the bool value in the console.
  void Validate(String email) {
    bool isvalid = EmailValidator.validate(email);
    print(isvalid);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('Email Validation'),
        ),
        body: Center(
          child: Column(
            children: [
              TextField(
                controller: inputcontroller,
                keyboardType: TextInputType.multiline,
                maxLines: null,
                style: TextStyle(
                  fontSize: 18,
                ),
                decoration: InputDecoration(
                  hintText: "Enter Email",
                  border: OutlineInputBorder(),
                ),
              ),
              MaterialButton(
                onPressed: (() => Validate(inputcontroller.text)),
                child: Text("Check"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Output: