import 'dart:ui'; import 'package:flutter/material.dart'; import 'package:google_fonts/google_fonts.dart'; import 'package:provider/provider.dart'; import '../providers/auth_provider.dart'; import '../../home/screens/home_screen.dart'; import 'signup_screen.dart'; class LoginScreen extends StatefulWidget { const LoginScreen({super.key}); @override State createState() => _LoginScreenState(); } class _LoginScreenState extends State { final _emailController = TextEditingController(); final _passwordController = TextEditingController(); bool _isPasswordVisible = false; @override void dispose() { _emailController.dispose(); _passwordController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { // Custom dark background for Login Page as per reference return Scaffold( backgroundColor: const Color(0xFF0A0B17), body: Stack( children: [ // Glowing Background Blobs // Blue Left Positioned( top: 180, left: 50, child: _buildGlowBlob(const Color(0xFF1D8BE0), 100), ), // Green Top Left Positioned( top: 40, left: 0, child: _buildGlowBlob(const Color(0xFF6CB655), 60), ), // Pink Bottom Left Positioned( bottom: 140, left: -40, child: _buildGlowBlob(const Color(0xFFDB21D9), 100, height: 200), ), // Orange Right Positioned( top: 100, right: 100, child: _buildGlowBlob(const Color(0xFFF28F50), 100), ), // Content Center( child: SingleChildScrollView( padding: const EdgeInsets.all(24), child: ClipRRect( borderRadius: BorderRadius.circular(24), child: BackdropFilter( filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10), child: Container( constraints: const BoxConstraints(maxWidth: 500), padding: const EdgeInsets.all(32), decoration: BoxDecoration( color: Colors.white.withOpacity(0.05), // Glass effect borderRadius: BorderRadius.circular(24), border: Border.all(color: Colors.white.withOpacity(0.2)), ), child: Consumer( builder: (context, auth, child) { return Column( mainAxisSize: MainAxisSize.min, children: [ // Logo Placeholder const Icon(Icons.hub, size: 80, color: Colors.blueAccent), // Replace with Image asset const SizedBox(height: 24), Text( "Sign in to SocialBuddy", style: GoogleFonts.nunito( color: Colors.white, fontSize: 24, fontWeight: FontWeight.bold, ), ), const SizedBox(height: 32), if (auth.error != null) Container( padding: const EdgeInsets.all(12), margin: const EdgeInsets.only(bottom: 16), decoration: BoxDecoration( color: Colors.red.withOpacity(0.1), border: Border.all(color: Colors.red.withOpacity(0.3)), borderRadius: BorderRadius.circular(8), ), child: Text( auth.error!, style: const TextStyle(color: Colors.redAccent), ), ), // Email Field TextFormField( controller: _emailController, style: const TextStyle(color: Colors.white), decoration: _inputDecoration("Email Address", Icons.email_outlined), ), const SizedBox(height: 16), // Password Field TextFormField( controller: _passwordController, obscureText: !_isPasswordVisible, style: const TextStyle(color: Colors.white), decoration: _inputDecoration("Password", Icons.lock_outline).copyWith( suffixIcon: IconButton( icon: Icon( _isPasswordVisible ? Icons.visibility_off : Icons.visibility, color: Colors.white70, ), onPressed: () { setState(() { _isPasswordVisible = !_isPasswordVisible; }); }, ), ), ), const SizedBox(height: 12), Align( alignment: Alignment.centerRight, child: TextButton( onPressed: () {}, child: const Text("Forgot Password?", style: TextStyle(color: Colors.blueAccent)), ), ), const SizedBox(height: 24), // Login Button SizedBox( width: double.infinity, height: 50, child: Container( decoration: BoxDecoration( gradient: const LinearGradient( colors: [Color(0xFF2563EB), Color(0xFFEC4899)], // Blue to Pink ), borderRadius: BorderRadius.circular(12), boxShadow: [ BoxShadow( color: const Color(0xFF2563EB).withOpacity(0.3), blurRadius: 12, offset: const Offset(0, 4), ), ], ), child: ElevatedButton( onPressed: auth.isLoading ? null : () async { final success = await auth.login( _emailController.text, _passwordController.text, ); if (success && mounted) { // Handle success flow ScaffoldMessenger.of(context).showSnackBar( const SnackBar(content: Text("Login Successful!")), ); Navigator.pushAndRemoveUntil( context, MaterialPageRoute(builder: (context) => const HomeScreen()), (route) => false, ); } }, style: ElevatedButton.styleFrom( backgroundColor: Colors.transparent, shadowColor: Colors.transparent, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)), ), child: auth.isLoading ? const CircularProgressIndicator(color: Colors.white) : const Text( "LOG IN", style: TextStyle( fontSize: 16, fontWeight: FontWeight.bold, color: Colors.white, letterSpacing: 1, ), ), ), ), ), const SizedBox(height: 24), // Divider Row( children: [ Expanded(child: Divider(color: Colors.white.withOpacity(0.2))), Padding( padding: const EdgeInsets.symmetric(horizontal: 16), child: Text("OR", style: TextStyle(color: Colors.white.withOpacity(0.5))), ), Expanded(child: Divider(color: Colors.white.withOpacity(0.2))), ], ), const SizedBox(height: 24), // Google Button OutlinedButton.icon( onPressed: () {}, icon: const Icon(Icons.g_mobiledata, size: 28, color: Colors.white), label: const Text("Continue with Google"), style: OutlinedButton.styleFrom( foregroundColor: Colors.white, side: BorderSide(color: Colors.white.withOpacity(0.2)), padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 24), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)), ), ), const SizedBox(height: 32), Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Text("Don't have an account? ", style: TextStyle(color: Colors.white.withOpacity(0.6))), GestureDetector( onTap: () { Navigator.push( context, MaterialPageRoute(builder: (context) => const SignUpScreen()), ); }, child: const Text("SIGN UP", style: TextStyle(color: Colors.blueAccent, fontWeight: FontWeight.bold)), ) ], ), ], ); }, ), ), ), ), ), ), ], ), ); } Widget _buildGlowBlob(Color color, double width, {double? height}) { // Simply use a Container with a box shadow that has a large blur radius return Container( width: width, height: height ?? width, decoration: BoxDecoration( color: color.withOpacity(0.4), // Reduced opacity shape: BoxShape.circle, boxShadow: [ BoxShadow( color: color.withOpacity(0.6), blurRadius: 100, // Very high blur for glow effect spreadRadius: 20, ), ], ), ); } InputDecoration _inputDecoration(String label, IconData icon) { return InputDecoration( hintText: label, hintStyle: TextStyle(color: Colors.white.withOpacity(0.5)), prefixIcon: Icon(icon, color: Colors.white70), filled: true, fillColor: const Color(0xFF070D1E).withOpacity(0.7), contentPadding: const EdgeInsets.symmetric(vertical: 16), border: OutlineInputBorder( borderRadius: BorderRadius.circular(12), borderSide: BorderSide(color: Colors.white.withOpacity(0.15)), ), enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(12), borderSide: BorderSide(color: Colors.white.withOpacity(0.15)), ), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(12), borderSide: BorderSide(color: Colors.white.withOpacity(0.3)), ), ); } }