Sign Up / Registration Screen
A clean multi-field registration screen with real-time validation, password strength indicator, terms acceptance checkbox, and a smooth entry animation. Ready to wire up to any backend.
Features
- 📝 Name, email, password, and confirm-password fields
- 🔐 Live password strength meter (Weak / Fair / Strong)
- ✅ Terms & Conditions checkbox with link
- 👁️ Password visibility toggles
- 🎞️ Staggered field entry animation
- 📱 Scrollable for small screens
Flutter Code
import 'package:flutter/material.dart';
import 'package:flutter/gestures.dart';
class SignUpScreen extends StatefulWidget {
const SignUpScreen({super.key});
State<SignUpScreen> createState() => _SignUpScreenState();
}
class _SignUpScreenState extends State<SignUpScreen>
with SingleTickerProviderStateMixin {
final _formKey = GlobalKey<FormState>();
final _nameController = TextEditingController();
final _emailController = TextEditingController();
final _passwordController = TextEditingController();
final _confirmController = TextEditingController();
bool _obscurePassword = true;
bool _obscureConfirm = true;
bool _acceptTerms = false;
bool _isLoading = false;
late AnimationController _animController;
void initState() {
super.initState();
_animController = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 900),
)..forward();
_passwordController.addListener(() => setState(() {}));
}
void dispose() {
_animController.dispose();
_nameController.dispose();
_emailController.dispose();
_passwordController.dispose();
_confirmController.dispose();
super.dispose();
}
// ── Password strength ──────────────────────────────────────────
PasswordStrength _getStrength(String password) {
if (password.length < 6) return PasswordStrength.weak;
int score = 0;
if (password.length >= 8) score++;
if (RegExp(r'[A-Z]').hasMatch(password)) score++;
if (RegExp(r'[0-9]').hasMatch(password)) score++;
if (RegExp(r'[!@#\$%^&*(),.?":{}|<>]').hasMatch(password)) score++;
if (score <= 1) return PasswordStrength.weak;
if (score <= 2) return PasswordStrength.fair;
return PasswordStrength.strong;
}
Animation<Offset> _staggerSlide(int index) {
final start = (index * 0.1).clamp(0.0, 0.9);
final end = (start + 0.4).clamp(0.0, 1.0);
return Tween<Offset>(begin: const Offset(0, 0.4), end: Offset.zero).animate(
CurvedAnimation(
parent: _animController,
curve: Interval(start, end, curve: Curves.easeOutCubic),
),
);
}
Animation<double> _staggerFade(int index) {
final start = (index * 0.1).clamp(0.0, 0.9);
final end = (start + 0.4).clamp(0.0, 1.0);
return Tween<double>(begin: 0, end: 1).animate(
CurvedAnimation(
parent: _animController,
curve: Interval(start, end, curve: Curves.easeOut),
),
);
}
Widget _animated(int index, Widget child) => FadeTransition(
opacity: _staggerFade(index),
child: SlideTransition(position: _staggerSlide(index), child: child),
);
Future<void> _handleRegister() async {
if (!_formKey.currentState!.validate()) return;
if (!_acceptTerms) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Please accept the terms & conditions')),
);
return;
}
setState(() => _isLoading = true);
await Future.delayed(const Duration(seconds: 2)); // Replace with real auth
if (mounted) setState(() => _isLoading = false);
}
Widget build(BuildContext context) {
final theme = Theme.of(context);
final cs = theme.colorScheme;
final strength = _getStrength(_passwordController.text);
return Scaffold(
backgroundColor: cs.surface,
body: SafeArea(
child: SingleChildScrollView(
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 24),
child: Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_animated(
0,
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 24),
Text(
'Create Account',
style: theme.textTheme.headlineMedium?.copyWith(
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 8),
Text(
'Fill in your details to get started',
style: theme.textTheme.bodyLarge?.copyWith(
color: cs.onSurfaceVariant,
),
),
const SizedBox(height: 36),
],
),
),
// Full Name
_animated(
1,
TextFormField(
controller: _nameController,
textCapitalization: TextCapitalization.words,
textInputAction: TextInputAction.next,
decoration: InputDecoration(
labelText: 'Full Name',
prefixIcon: const Icon(Icons.person_outlined),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
),
filled: true,
fillColor: cs.surfaceContainerHighest.withValues(
alpha: 0.4,
),
),
validator: (v) => (v == null || v.trim().isEmpty)
? 'Name is required'
: null,
),
),
const SizedBox(height: 16),
// Email
_animated(
2,
TextFormField(
controller: _emailController,
keyboardType: TextInputType.emailAddress,
textInputAction: TextInputAction.next,
decoration: InputDecoration(
labelText: 'Email address',
prefixIcon: const Icon(Icons.email_outlined),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
),
filled: true,
fillColor: cs.surfaceContainerHighest.withValues(
alpha: 0.4,
),
),
validator: (v) {
if (v == null || v.trim().isEmpty) {
return 'Email is required';
}
if (!RegExp(
r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$',
).hasMatch(v.trim())) {
return 'Enter a valid email';
}
return null;
},
),
),
const SizedBox(height: 16),
// Password
_animated(
3,
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TextFormField(
controller: _passwordController,
obscureText: _obscurePassword,
textInputAction: TextInputAction.next,
decoration: InputDecoration(
labelText: 'Password',
prefixIcon: const Icon(Icons.lock_outlined),
suffixIcon: IconButton(
icon: Icon(
_obscurePassword
? Icons.visibility_outlined
: Icons.visibility_off_outlined,
),
onPressed: () => setState(
() => _obscurePassword = !_obscurePassword,
),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
),
filled: true,
fillColor: cs.surfaceContainerHighest.withValues(
alpha: 0.4,
),
),
validator: (v) {
if (v == null || v.isEmpty) {
return 'Password is required';
}
if (v.length < 6) {
return 'Minimum 6 characters';
}
return null;
},
),
if (_passwordController.text.isNotEmpty) ...[
const SizedBox(height: 8),
_PasswordStrengthIndicator(strength: strength),
],
],
),
),
const SizedBox(height: 16),
// Confirm Password
_animated(
4,
TextFormField(
controller: _confirmController,
obscureText: _obscureConfirm,
textInputAction: TextInputAction.done,
onFieldSubmitted: (_) => _handleRegister(),
decoration: InputDecoration(
labelText: 'Confirm Password',
prefixIcon: const Icon(Icons.lock_outlined),
suffixIcon: IconButton(
icon: Icon(
_obscureConfirm
? Icons.visibility_outlined
: Icons.visibility_off_outlined,
),
onPressed: () =>
setState(() => _obscureConfirm = !_obscureConfirm),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
),
filled: true,
fillColor: cs.surfaceContainerHighest.withValues(
alpha: 0.4,
),
),
validator: (v) {
if (v == null || v.isEmpty) {
return 'Please confirm your password';
}
if (v != _passwordController.text) {
return 'Passwords do not match';
}
return null;
},
),
),
const SizedBox(height: 24),
// Terms Checkbox
_animated(
5,
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Checkbox(
value: _acceptTerms,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(4),
),
onChanged: (v) =>
setState(() => _acceptTerms = v ?? false),
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(top: 12),
child: RichText(
text: TextSpan(
style: theme.textTheme.bodyMedium?.copyWith(
color: cs.onSurfaceVariant,
),
children: [
const TextSpan(text: 'I agree to the '),
TextSpan(
text: 'Terms of Service',
style: TextStyle(
color: cs.primary,
fontWeight: FontWeight.w600,
),
recognizer: TapGestureRecognizer()
..onTap = () {
/* Open terms */
},
),
const TextSpan(text: ' and '),
TextSpan(
text: 'Privacy Policy',
style: TextStyle(
color: cs.primary,
fontWeight: FontWeight.w600,
),
recognizer: TapGestureRecognizer()
..onTap = () {
/* Open privacy */
},
),
],
),
),
),
),
],
),
),
const SizedBox(height: 28),
// Register Button
_animated(
6,
SizedBox(
width: double.infinity,
height: 52,
child: FilledButton(
onPressed: _isLoading ? null : _handleRegister,
style: FilledButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
),
child: _isLoading
? const SizedBox(
width: 22,
height: 22,
child: CircularProgressIndicator(
strokeWidth: 2.5,
color: Colors.white,
),
)
: const Text(
'Create Account',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
),
),
),
),
),
const SizedBox(height: 24),
// Sign In link
_animated(
7,
Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Already have an account? ',
style: theme.textTheme.bodyMedium?.copyWith(
color: cs.onSurfaceVariant,
),
),
GestureDetector(
onTap: () => Navigator.of(context).pop(),
child: Text(
'Sign In',
style: TextStyle(
color: cs.primary,
fontWeight: FontWeight.w600,
),
),
),
],
),
),
),
],
),
),
),
),
);
}
}
// ── Password strength enum ─────────────────────────────────────────
enum PasswordStrength { weak, fair, strong }
class _PasswordStrengthIndicator extends StatelessWidget {
final PasswordStrength strength;
const _PasswordStrengthIndicator({required this.strength});
Widget build(BuildContext context) {
final colors = {
PasswordStrength.weak: Colors.red,
PasswordStrength.fair: Colors.orange,
PasswordStrength.strong: Colors.green,
};
final labels = {
PasswordStrength.weak: 'Weak',
PasswordStrength.fair: 'Fair',
PasswordStrength.strong: 'Strong',
};
final filled = strength.index + 1;
final color = colors[strength]!;
return Row(
children: [
...List.generate(3, (i) {
return Expanded(
child: AnimatedContainer(
duration: const Duration(milliseconds: 300),
margin: const EdgeInsets.only(right: 4),
height: 4,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(2),
color: i < filled
? color
: Theme.of(context).colorScheme.surfaceContainerHighest,
),
),
);
}),
const SizedBox(width: 8),
Text(
labels[strength]!,
style: TextStyle(
color: color,
fontSize: 12,
fontWeight: FontWeight.w600,
),
),
],
);
}
}
Dependencies
No extra packages required.
Customization Tips
- Add profile picture upload step after successful registration
- Integrate with
firebase_auth.createUserWithEmailAndPassword() - Add phone number field for multi-factor authentication setup