Create Login Form Using Username, Password or Fingerprint in Flutter
Tags: flutter, dart, techzpad, webdev
Published: 2023-02-12 15:27:26

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. Read More Article Form [Here](https://techzpad.com/create-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,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}`