How to Make Email Validation in Flutter – Using Email Validator Library

Hi Guys, Welcome to Proto Coders Point,  In this Flutter Tutorial we will integrate Flutter library called Email Validator to validate email address.

Email Validation

Usually Email Validation is done, by a String value that contains alphabets, @ symbols and a .(dot) symbol For Example: contact@protocoderspoint.com, This email address contains all the characters required to be a perfect/valid email address.

Flutter Email Validation Library

Flutter Comes with awesome and easy to use flutter Library/Plugins. This Email validation flutter library is pre defined class that validated email addresses. You just need to call its class. This plugin is very easy to use and understand. Visit official site to learn more here Let’s start adding the library in our Flutter Project.

Adding Dependencies in our project

Open Pubspec.yaml and add the dependencies

dependencies:
  email_validator: ^1.0.4 // add this line

Import the email validator dart class

you need to import the email_validator.dart file, where you want to make use validator library. In my case i have imported it in main.dart file

import 'package:email_validator/email_validator.dart';

And their you go now you can use the library.

Snippet Code Example how to use it

    const String email = 'contact@protocoderspoint.com';
    final bool isValid = EmailValidator.validate(email);

    print('Email is valid? ' + (isValid ? 'yes' : 'no'));

The above code is snippet code, Their is a string that holds email address, a boolen type variable that stored true or false based on email address, is the email is valid it will store true else false. (isValid ? ‘yes’ : ‘no’) :  is similar to if else statement.

Complete code on Email Validation in flutter

In my flutter project i have 2 dart files. main.dart is with TextFormField() where we will check if email is valid, if entered email is valid that the user will be navigated to page2.dart main.dart Copy paste the below code in main.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:email_validator/email_validator.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'page2.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _emailcontroller = TextEditingController();
  bool isvalid = false;

  @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    return Scaffold(
      appBar: AppBar(
        title: Text("Email Validate Example"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Center(
          child: Column(
            children: <Widget>[
              Text(
                "Example on Email Validation",
                style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                    fontStyle: FontStyle.italic),
              ),
              Container(
                height: 10,
              ),
              TextFormField(
                controller: _emailcontroller,
                decoration: InputDecoration(
                    labelText: "Email",
                    labelStyle: TextStyle(color: Colors.blue),
                    focusedBorder: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.red),
                        borderRadius: BorderRadius.circular(10.0)),
                    enabledBorder: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.red),
                        borderRadius: BorderRadius.circular(10.0))),
              ),
              SizedBox(
                height: 10,
              ),
              RaisedButton(
                onPressed: () {
                  isvalid = EmailValidator.validate(_emailcontroller.text);
                  if (isvalid) {
                    Navigator.push(context,
                        MaterialPageRoute(builder: (context) => Page2()));
                  } else {
                    Fluttertoast.showToast(
                        msg: "Please Enter a valid Email",
                        toastLength: Toast.LENGTH_SHORT,
                        gravity: ToastGravity.BOTTOM,
                        timeInSecForIos: 1,
                        backgroundColor: Colors.red,
                        textColor: Colors.white,
                        fontSize: 16.0);
                  }
                },
                child: Container(
                  width: width * 0.5,
                  child: Center(
                    child: Text(
                      "Submit",
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
                color: Colors.blue,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

page2.dart Create a new dart page in lib folder of your flutter project and add below code. the below code is simply a UI where we show a Text.

import 'package:flutter/material.dart';

class Page2 extends StatefulWidget {
  @override
  _Page2State createState() => _Page2State();
}

class _Page2State extends State<Page2> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Email Validator Flutter plugin"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text("Email Address is validate"),
          ],
        ),
      ),
    );
  }
}

Check out Similar Articles on Validation Flutter Password Validation Flutter Form Validation Flutter Email Validation using plugin Flutter Email Regex Pattern