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.
- Depend on it
Add this to your package's pubspec.yaml file:
dependencies:
email_validator: '^1.0.0'
- 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.
- 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:
- pubspec.yaml
- 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 `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 `Scaffold`is 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());