Create Login Form Using 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. Read More Article Form Here
`import 'package:flutter/material.dart';
import 'package:local_auth/local_auth.dart';

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

class _LoginScreenState extends State {
final _formKey = GlobalKey();
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 _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: [
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,
),
),
],
),
),
),
);
}
}`