Email Login Screen
A modern, production-ready email login screen with animated entry, floating labels, real-time form validation, password visibility toggle, and social login options. Fully built with Material 3 and clean StatefulWidget patterns.
Features
- 🎨 Smooth fade + slide entry animation
- 🔒 Password visibility toggle
- ✅ Real-time email & password form validation
- 🌐 Social login buttons (Google & Apple)
- 📱 Responsive single-scroll layout
- ♿ Accessible labels and semantics
Flutter Code
import 'package:flutter/material.dart';
class EmailLoginScreen extends StatefulWidget {
const EmailLoginScreen({super.key});
State<EmailLoginScreen> createState() => _EmailLoginScreenState();
}
class _EmailLoginScreenState extends State<EmailLoginScreen>
with SingleTickerProviderStateMixin {
final _formKey = GlobalKey<FormState>();
final _emailController = TextEditingController();
final _passwordController = TextEditingController();
bool _obscurePassword = true;
bool _isLoading = false;
late AnimationController _fadeController;
late Animation<double> _fadeAnimation;
late Animation<Offset> _slideAnimation;
void initState() {
super.initState();
_fadeController = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 700),
);
_fadeAnimation = CurvedAnimation(
parent: _fadeController,
curve: Curves.easeOut,
);
_slideAnimation =
Tween<Offset>(begin: const Offset(0, 0.25), end: Offset.zero).animate(
CurvedAnimation(parent: _fadeController, curve: Curves.easeOutCubic),
);
_fadeController.forward();
}
void dispose() {
_fadeController.dispose();
_emailController.dispose();
_passwordController.dispose();
super.dispose();
}
Future<void> _handleSignIn() async {
if (!_formKey.currentState!.validate()) 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;
return Scaffold(
backgroundColor: cs.surface,
body: SafeArea(
child: SingleChildScrollView(
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 40),
child: FadeTransition(
opacity: _fadeAnimation,
child: SlideTransition(
position: _slideAnimation,
child: Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 32),
Text(
'Welcome Back 👋',
style: theme.textTheme.headlineMedium?.copyWith(
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 8),
Text(
'Sign in to your account to continue',
style: theme.textTheme.bodyLarge?.copyWith(
color: cs.onSurfaceVariant,
),
),
const SizedBox(height: 48),
// Email
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';
}
final emailRegex = RegExp(
r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$',
);
if (!emailRegex.hasMatch(v.trim())) {
return 'Enter a valid email address';
}
return null;
},
),
const SizedBox(height: 16),
// Password
TextFormField(
controller: _passwordController,
obscureText: _obscurePassword,
textInputAction: TextInputAction.done,
onFieldSubmitted: (_) => _handleSignIn(),
decoration: InputDecoration(
labelText: 'Password',
prefixIcon: const Icon(Icons.lock_outlined),
suffixIcon: IconButton(
tooltip: _obscurePassword
? 'Show password'
: 'Hide password',
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 'Password must be at least 6 characters';
}
return null;
},
),
const SizedBox(height: 8),
// Forgot password
Align(
alignment: Alignment.centerRight,
child: TextButton(
onPressed: () {},
child: const Text('Forgot password?'),
),
),
const SizedBox(height: 20),
// Sign In button
SizedBox(
width: double.infinity,
height: 52,
child: FilledButton(
onPressed: _isLoading ? null : _handleSignIn,
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(
'Sign In',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
),
),
),
),
const SizedBox(height: 32),
// Divider
Row(
children: [
Expanded(child: Divider(color: cs.outline)),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Text(
'or continue with',
style: theme.textTheme.bodySmall?.copyWith(
color: cs.onSurfaceVariant,
),
),
),
Expanded(child: Divider(color: cs.outline)),
],
),
const SizedBox(height: 24),
// Social buttons
Row(
children: [
Expanded(
child: _SocialButton(
label: 'Google',
icon: Icons.g_mobiledata_rounded,
onPressed: () {
/* Google auth */
},
),
),
const SizedBox(width: 12),
Expanded(
child: _SocialButton(
label: 'Apple',
icon: Icons.apple,
onPressed: () {
/* Apple auth */
},
),
),
],
),
const SizedBox(height: 40),
// Sign Up link
Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Don't have an account? ",
style: theme.textTheme.bodyMedium?.copyWith(
color: cs.onSurfaceVariant,
),
),
GestureDetector(
onTap: () {
/* Navigate to SignUpScreen */
},
child: Text(
'Sign Up',
style: TextStyle(
color: cs.primary,
fontWeight: FontWeight.w600,
),
),
),
],
),
),
],
),
),
),
),
),
),
);
}
}
class _SocialButton extends StatelessWidget {
final String label;
final IconData icon;
final VoidCallback onPressed;
const _SocialButton({
required this.label,
required this.icon,
required this.onPressed,
});
Widget build(BuildContext context) {
final cs = Theme.of(context).colorScheme;
return OutlinedButton.icon(
onPressed: onPressed,
icon: Icon(icon, size: 22),
label: Text(label),
style: OutlinedButton.styleFrom(
padding: const EdgeInsets.symmetric(vertical: 14),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
side: BorderSide(color: cs.outline),
),
);
}
}
Dependencies
No extra packages required — uses Flutter SDK only.
Customization Tips
- Replace
_handleSignInbody with your auth logic (Firebase Auth, Supabase, etc.) - Use
google_sign_inpackage for proper Google OAuth flow - Swap
Icons.g_mobiledata_roundedwith an SVG asset for pixel-perfect Google branding - Wrap in a
Themewidget to apply brand colors without modifying the widget