Biometric Unlock
Loading preview
Starting the Flutter app
A Flutter biometric unlock screen with Face ID and fingerprint prompts and a passcode fallback.
import 'package:flutter/material.dart';
class BiometricUnlock extends StatefulWidget {
/// Called by 'Use passcode instead'. Without it the demo shows a SnackBar.
final VoidCallback? onUsePasscode;
const BiometricUnlock({super.key, this.onUsePasscode});
@override
State<BiometricUnlock> createState() => _BiometricUnlockState();
}
class _BiometricUnlockState extends State<BiometricUnlock> {
bool _scanning = false;
bool _unlocked = false;
void _scan() {
setState(() => _scanning = true);
Future.delayed(const Duration(milliseconds: 1200), () {
if (!mounted) return;
setState(() {
_scanning = false;
_unlocked = true;
});
});
}
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final scheme = theme.colorScheme;
final color = _unlocked ? Colors.green : scheme.primary;
return Scaffold(
body: SafeArea(
child: Padding(
padding: const EdgeInsets.all(28),
child: Column(
children: [
const Spacer(),
Text('Nimbus is locked',
style: theme.textTheme.titleLarge
?.copyWith(fontWeight: FontWeight.bold)),
const SizedBox(height: 8),
Text(_unlocked
? 'Unlocked'
: _scanning
? 'Scanning…'
: 'Tap to unlock with Face ID or Touch ID'),
const SizedBox(height: 48),
GestureDetector(
onTap: _scanning || _unlocked ? null : _scan,
child: AnimatedContainer(
duration: const Duration(milliseconds: 300),
width: 140,
height: 140,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: color.withValues(alpha: _scanning ? 0.25 : 0.12),
border: Border.all(color: color, width: 3),
),
child: Icon(
_unlocked
? Icons.lock_open_rounded
: Icons.fingerprint,
size: 72,
color: color,
),
),
),
const Spacer(),
OutlinedButton.icon(
onPressed: widget.onUsePasscode ??
() => _showDemo(context, 'Passcode entry goes here (demo)'),
icon: const Icon(Icons.dialpad),
label: const Text('Use passcode instead'),
),
const SizedBox(height: 8),
],
),
),
),
);
}
}
void _showDemo(BuildContext context, String message) {
ScaffoldMessenger.of(context)
..hideCurrentSnackBar()
..showSnackBar(SnackBar(content: Text(message)));
}
Add it to your project
Copies the Dart source into your app, so you own it. Flutter SDK only, no extra packages.
First time? Run dart pub global activate fluttertemplates_dev, or read the CLI guide.
How it works
Nothing touches a biometric API. _scan sets _scanning, waits 1200 ms with Future.delayed, then always succeeds by setting _unlocked, so no failure state exists. The AnimatedContainer ring and status Text react to those two booleans, and taps are ignored while scanning or once unlocked. ‘Use passcode instead’ calls onUsePasscode, or shows a demo SnackBar without it.
Adapting it
- Replace the delay in
_scanwithLocalAuthentication().authenticate()from local_auth, plus that package’s platform setup. - Add an error flag beside
_unlockedfor failed or cancelled attempts. - Navigate away on success instead of stopping at
Icons.lock_open_rounded, and pointonUsePasscodeat your PIN screen.