Blog

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.

Installation
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:

dependencies:
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';
Usage
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.
dependencies:
  flutter:
    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"
dev_dependencies:
  flutter_test:
    sdk: flutter
flutter:
  uses-material-design: true

(b). login.dart

Our login.dart file.

import 'package:flutter/material.dart';
import 'package:email_validator/email_validator.dart';
//we create a widget <code>LoginPage that will have state
class LoginPage extends StatefulWidget {
  // createState() will create the mutable state for this widget at a given
  //location in the tree.
  @override
  _LoginPageState createState() => _LoginPageState();
}
//The logic and internal state for our StatefulWidget(LoginPage).
//State is information that (1) can be read synchronously when the widget is
//built and (2) might change during the lifetime of the widget.
class _LoginPageState extends State<LoginPage> {
  //GlobalKey() will create us a LabeledGlobalKey, which is a GlobalKey
  //with a label used for debugging.
  // A GlobalKey is a key that is unique across the entire app.
  //FormState is a state associated with a Form widget.
  final formKey = GlobalKey<FormState>();
  //SaffoldState is a state for a Scaffold.
  // Remember Scaffoldis a class that implements the basic material design
  //visual layout structure and derives from the StatefulWidget
  final scaffoldKey = GlobalKey<ScaffoldState>();
  //We have two private fields here
  String _email;
  String _password;
  // a private method _submitCommand()
  void _submitCommand() {
    //get state of our Form
    final form = formKey.currentState;
    //validate() validates every FormField that is a descendant of this Form,
    // and returns true if there are no errors.
    if (form.validate()) {
      //save() Saves every FormField that is a descendant of this Form.
      form.save();
      // Email & password matched our validation rules
      // and are saved to _email and _password fields.
      _loginCommand();
    }
  }
  void _loginCommand() {
    // Show login details in snackbar
    final snackbar = SnackBar(
      content: Text('Email: $_email, password: $_password'),
    );
    scaffoldKey.currentState.showSnackBar(snackbar);
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: scaffoldKey,
      appBar: AppBar(
        title: Text('Simple Login Validator'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: formKey,
          child: Column(
            children: [
              TextFormField(
                decoration: InputDecoration(labelText: 'Email'),
                validator: (val) => !EmailValidator.Validate(val, true)
                    ? 'Please provide a valid email.'
                    : null,
                onSaved: (val) => _email = val,
              ),
              TextFormField(
                decoration: InputDecoration(labelText: 'Password'),
                validator: (val) =>
                    val.length < 4 ? 'Your password is too Password too short..' : null,
                onSaved: (val) => _password = val,
                obscureText: true,
              ),
              RaisedButton(
                onPressed: _submitCommand,
                child: Text('Login'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

(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.

import 'package:flutter/material.dart';
import 'package:login_validator/login.dart';
//Our app
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Mr Login',
      theme: ThemeData(
        primarySwatch: Colors.orange,
      ),
      home: LoginPage(),
    );
  }
}
//main function
void main() => runApp(MyApp());