Email Validation Using Email Validator Package in Flutter

In this article, we are going to look at an awesome package which can be used in a flutter app while validating a users email address.

Email validator

Email validator is a simple (but correct) Dart class for validating email addresses without using RegEx. Can also be used to validate emails within Flutter apps (see Flutter email validation).

Implementation

1. Create a new Flutter project.

2. Add the Email validator package in the pubspec.yaml. Also add fluttertoast package for letting the users know what is up with their email.

dev_dependencies:
  email_validator: ^2.0.1
  fluttertoast: ^8.0.8

3. Make a new dart file, import the Email validator package and the Flutter Toast package and create a stful widget

import 'package:email_validator/email_validator.dart';
import ‘package:fluttertoast/fluttertoast.dart’;

Get Programmers Pouch’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

4. Add the required variables:

final _emailController = TextEditingController();
bool _isValid = false;

5. Make a TextFormField.
Place the _emailController variable that we made in place of the controller property.
Format it a little.

return Scaffold(
  backgroundColor: Colors.blue,
  body: Center(
      child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      Padding(
        padding: EdgeInsets.only(left: 8.0, right: 8),
        child: TextFormField(
          controller: _emailController,
          keyboardType: TextInputType.emailAddress,
          decoration: const InputDecoration(
            focusedBorder: OutlineInputBorder(
              borderSide: BorderSide(
                width: 2.0,
                color: Colors.white,
              ),
            ),
            enabledBorder: OutlineInputBorder(
              borderSide: BorderSide(
                width: 2.0,
                color: Colors.white,
              ),
            ),
            prefixIcon: Icon(
              Icons.email,
              color: Colors.blue,
            ),
            filled: true,
            fillColor: Colors.white,
            hintText: "email",
            hintStyle: TextStyle(
              color: Colors.blue,
              fontSize: 17.0,
            ),
          ),
          textInputAction: TextInputAction.next,
        ),
      ),

6. Create a submit button for validation and toast message.

Logic for Submit Button

We make a new variable named _isValid that checks if the the email is valid or not by using the Email Validator package’s validate function.
Then, we use if to check to see that if email is valid, we return a toast with message “Valid Email”.
By using Else if we check whether the email TextFormField is empty, then we return a toast with message “Enter Email”.
Now, by using Else there’s only one possibility that the email is not valid. So we return another toast with the message “Enter a Valid Email”.

FlatButton(
  child: Text(
    'Validate',
    style: TextStyle(color: Colors.white),
  ),
  color: Colors.blue,
  onPressed: () {
    _isValid = EmailValidator.validate(_emailController.text);
    if (_isValid) {
      Fluttertoast.showToast(
          msg: "Valid Email",
          toastLength: Toast.LENGTH_SHORT,
          gravity: ToastGravity.TOP,
          timeInSecForIosWeb: 1,
          fontSize: 16.0);
    } else if (_emailController.text.isEmpty) {
      Fluttertoast.showToast(
          msg: 'Enter Email',
          toastLength: Toast.LENGTH_SHORT,
          gravity: ToastGravity.TOP,
          timeInSecForIosWeb: 1,
          fontSize: 16.0);
    } else {
      Fluttertoast.showToast(
          msg: 'Enter a Valid Email',
          toastLength: Toast.LENGTH_SHORT,
          gravity: ToastGravity.TOP,
          timeInSecForIosWeb: 1,
          fontSize: 16.0);
    }
  },
)

7. Follow the above steps.

8. Hit the claps and follow button!

That’s all about the awesome Email Validator package.

Clap👏 for me if you liked my article. Buy me a coffee☕ to show me your support. Make sure to comment if I got something wrong.

You can reach me out at GitHub, LinkedIn and Twitter. Don’t forget to follow me on Medium so that you can get the latest updates for my articles.

You’ll get the source code on GitHub.

BYE👋!