Create Login Form With Username, Password or Fingerprint in Flutter

A login form in Flutter is a user interface (UI) element that allows users to enter their credentials, such as email and password, to access a protected area of an application. In Flutter, you can create a login form by using widgets such as TextFormField, RaisedButton, and Form to build the UI. You can also add validation to ensure that the entered credentials are valid.

How to fingerprint works ?

Fingerprint authentication in a mobile application works by using the device’s fingerprint scanner to capture a biometric sample of the user’s fingerprint and comparing it against a previously enrolled biometric template. If the captured sample matches the enrolled template, the user is considered authenticated and the application can proceed.

Here’s a basic overview of the process:

1. Enrollment: When the user sets up fingerprint authentication, they place their finger on the scanner multiple times to capture multiple biometric samples. These samples are used to create a biometric template, which is then stored securely on the device.
2. Authentication: When the user wants to authenticate, they place their finger on the scanner again. The captured biometric sample is compared against the stored template.
3. Comparison: The biometric comparison process uses algorithms to compare the captured sample to the stored template. The algorithms check for characteristics such as the ridges and valleys of the fingerprint and compare them to the stored data.
4. Result: If the comparison process determines that the captured sample matches the stored template, the user is considered authenticated and the application can proceed. If the comparison process determines that the sample does not match the template, the user is not authenticated and the application may take additional steps such as prompting the user to try again or displaying an error message.

The security of fingerprint authentication depends on the quality of the biometric sample and the strength of the biometric comparison process. Modern smartphones use advanced sensors and algorithms to capture high-quality biometric samples and perform robust comparisons, making fingerprint authentication a convenient and secure method for user authentication in mobile applications.

login form in Flutter

Example of Login form in Flutter:

import 'package:flutter/material.dart';
import 'package:local_auth/local_auth.dart';

class LoginScreen extends StatefulWidget {
  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  final _formKey = GlobalKey<FormState>();
  String _email;
  String _password;
  bool _isObscured = true;
  Color _eyeButtonColor = Colors.grey;
  LocalAuthentication _localAuth = LocalAuthentication();

  void _toggle() {
    setState(() {
      _isObscured = !_isObscured;
      _eyeButtonColor = _isObscured ? Colors.grey : Colors.blue;
    });
  }

  Future<void> _authorizeWithFingerprint() async {
    try {
      bool isAuthorized = false;
      isAuthorized = await _localAuth.authenticateWithBiometrics(
          localizedReason: "Please authenticate to proceed");
      if (isAuthorized) {
        print("Authorized");
      }
    } catch (e) {
      print(e);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Login"),
      ),
      body: Container(
        padding: EdgeInsets.all(16),
        child: Form(
          key: _formKey,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              TextFormField(
                decoration: InputDecoration(
                  labelText: "Email",
                  hintText: "Enter your email",
                ),
                validator: (value) {
                  if (value.isEmpty) {
                    return "Please enter your email";
                  }
                  return null;
                },
                onSaved: (value) => _email = value,
              ),
              SizedBox(
                height: 16,
              ),
              TextFormField(
                decoration: InputDecoration(
                  labelText: "Password",
                  hintText: "Enter your password",
                  suffixIcon: IconButton(
                    onPressed: _toggle,
                    color: _eyeButtonColor,
                    icon: _isObscured
                        ? Icon(Icons.visibility_off)
                        : Icon(Icons.visibility),
                  ),
                ),
                obscureText: _isObscured,
                validator: (value) {
                  if (value.isEmpty) {
                    return "Please enter your password";
                  }
                  return null;
                },
                onSaved: (value) => _password = value,
              ),
              SizedBox(
                height: 16,
              ),
              Container(
                width: double.infinity,
                child: RaisedButton(
                  onPressed: () {
                    if (_formKey.currentState.validate()) {
                      _formKey.currentState.save();
                      print("Email: $_email");                      
                      print("Password: $_password");
                      // Add your code here to process the login
                      // For example, check the credentials against a database or authentication server.
                    }
                  },
                  child: Text("LOGIN"),
                  color: Colors.blue,
                  textColor: Colors.white,
                ),
              ),
              SizedBox(
                height: 16,
              ),
              Container(
                width: double.infinity,
                child: RaisedButton(
                  onPressed: _authorizeWithFingerprint,
                  child: Text("LOGIN WITH FINGERPRINT"),
                  color: Colors.blue,
                  textColor: Colors.white,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Also Read: How to Create Splash Screen in Flutter Application

The output of the code above is a login form UI in Flutter that allows users to enter their email and password and submit the form by pressing the “LOGIN” button. When the form is submitted, the code validates the entered email and password, and if they are valid, it prints the email and password to the console.