Flutter Widgets → Flutter Login Validation – Camposha

Flutter Widgets

Flutter Widgets

Flutter Widgets

Flutter Login Validation

Flutter LoginValidator Tutorial.

How to perform client-side login form authentication using flutter with LoginValidator library.

Many apps require user authentication. Most of these apps have a way to communicate to some remote webservice which performs the authentication on the server. However the client also has to perform some basic client-side authentication, mostly to validate the data input.

Because of that we need a way to validate textfields like username, email and password. Well we have a library that is easy yet flexible enough to cater for this type of validation.


In this piece we see how to perform login validation using the login-validator library.

Let’s start.

Video Tutorial(ProgrammingWizards TV Channel)

Well we have a video tutorial as an alternative to this. If you prefer tutorials like this one then it would be good you subscribe to our YouTube channel. Basically we have a TV for programming where do daily tutorials especially android.

What is Email Validator

A simple (but correct) Dart class for validating email addresses.

Dart requires the latest version of Dart. You can download the latest and greatest here.

  1. Depend on it
    Add this to your package’s pubspec.yaml file:

email_validator: ‘^1.0.0’

  1. Install it
    You can install packages from the command line:

$ pub get
Alternatively, your editor might support pub. Check the docs for your editor to learn more.

  1. Import it
    Now in your Dart code, you can use:
import 'package:email_validator/email_validator.dart';
Read the unit tests under test, or see code example below:

void main() {

    var email = "[email protected]";

    assert(EmailValidator.validate(email) == true);


Here are the files we explore:

  1. pubspec.yaml
  2. lib/main.dart

(a). pubspec.yaml

This is where we add our dependencies. Clearly you can see one of the dependencies is the email_validator, our third party library that abstracts us away the login validation logic.

name: login_validator
description: A new Flutter project.

    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  email_validator: "0.1.4"

    sdk: flutter

  uses-material-design: true

(b). login.dart

Our login.dart file.

(c). main.dart

Here’s the main.dart file. This is our main class as it contains our main method. As usual we start by importing our packages, derive from StatelessWidget, then write our main function.

Leave a Reply

Your email address will not be published. Required fields are marked *