Okay, let's make the registration page more visually appealing with animations and a refined, colorful design. We'll introduce: 1. A subtle gradient background. 2. Smoother transitions for the loading state on the button. 3. Enhanced styling using theme colors (assuming you have a theme set up in your `main.dart`). 4. A placeholder for a logo/icon. 5. Slightly refined layout and input field styling. import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'package:gonavi/services/auth_service.dart'; // Ensure this path is correct class RegistrationPage extends StatefulWidget { @override _RegistrationPageState createState() => _RegistrationPageState(); } class _RegistrationPageState extends State with SingleTickerProviderStateMixin { final _formKey = GlobalKey(); final TextEditingController _emailController = TextEditingController(); final TextEditingController _passwordController = TextEditingController(); final TextEditingController _confirmPasswordController = TextEditingController(); bool _isLoading = false; bool _obscurePassword = true; bool _obscureConfirmPassword = true; String _selectedRole = "user"; late AnimationController _animationController; late Animation _fadeAnimation; @override void initState() { super.initState(); _animationController = AnimationController( vsync: this, duration: Duration(milliseconds: 800), ); _fadeAnimation = CurvedAnimation( parent: _animationController, curve: Curves.easeInOut, ); _animationController.forward(); } @override void dispose() { _animationController.dispose(); _emailController.dispose(); _passwordController.dispose(); _confirmPasswordController.dispose(); super.dispose(); } Future _register() async { // Hide keyboard FocusScope.of(context).unfocus(); if (!_formKey.currentState!.validate()) return; if (_passwordController.text != _confirmPasswordController.text) { _showErrorDialog("كلمتا المرور غير متطابقتين!"); return; } setState(() => _isLoading = true); _animationController.reverse(); // Fade out form elements slightly during load try { await Provider.of(context, listen: false).registerWithEmail( _emailController.text.trim(), _passwordController.text.trim(), _selectedRole, ); // Keep loading indicator a bit longer for visual feedback await Future.delayed(Duration(milliseconds: 500)); _showSuccessDialog(); } catch (e) { _showErrorDialog(e.toString()); } finally { if (mounted) { setState(() => _isLoading = false); _animationController.forward(); // Fade form elements back in } } } void _showSuccessDialog() { showDialog( context: context, builder: (context) => AlertDialog( shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15.0)), title: Row( children: [ Icon(Icons.check_circle, color: Colors.green), SizedBox(width: 10), Text("نجاح", style: TextStyle(fontWeight: FontWeight.bold)), ], ), content: Text("تم التسجيل بنجاح! يمكنك الآن تسجيل الدخول."), actions: [ TextButton( onPressed: () { Navigator.pop(context); // Close dialog Navigator.pop(context); // Go back from registration page }, child: Text("موافق", style: TextStyle(color: Theme.of(context).primaryColor, fontWeight: FontWeight.bold)), ), ], ), ); } void _showErrorDialog(String message) { // Extract a cleaner error message if possible (Firebase often includes prefixes) String cleanMessage = message.contains(']') ? message.split('] ').last : message; showDialog( context: context, builder: (context) => AlertDialog( shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15.0)), title: Row( children: [ Icon(Icons.error, color: Colors.red), SizedBox(width: 10), Text("خطأ", style: TextStyle(fontWeight: FontWeight.bold, color: Colors.red)), ], ), content: Text(cleanMessage), actions: [ TextButton( onPressed: () => Navigator.pop(context), child: Text("حسناً", style: TextStyle(color: Theme.of(context).primaryColor, fontWeight: FontWeight.bold)), ), ], ), ); } @override Widget build(BuildContext context) { final theme = Theme.of(context); final primaryColor = theme.primaryColor; final accentColor = theme.colorScheme.secondary; // Use accentColor from theme return Scaffold( // Use a gradient background body: Container( decoration: BoxDecoration( gradient: LinearGradient( colors: [primaryColor.withOpacity(0.8), accentColor.withOpacity(0.6)], begin: Alignment.topLeft, end: Alignment.bottomRight, ), ), child: SafeArea( child: Center( child: SingleChildScrollView( padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 32.0), child: FadeTransition( opacity: _fadeAnimation, child: Card( elevation: 8.0, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16.0)), child: Padding( padding: const EdgeInsets.all(24.0), child: Form( key: _formKey, child: Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.stretch, children: [ // Placeholder for Logo FlutterLogo(size: 60, style: FlutterLogoStyle.markOnly, textColor: primaryColor), SizedBox(height: 10), Text( "إنشاء حساب جديد", textAlign: TextAlign.center, style: theme.textTheme.headlineSmall?.copyWith(fontWeight: FontWeight.bold, color: primaryColor), ), SizedBox(height: 25), _buildTextFormField( controller: _emailController, labelText: "البريد الإلكتروني", icon: Icons.email_outlined, keyboardType: TextInputType.emailAddress, validator: (value) { if (value == null || value.isEmpty) return "الرجاء إدخال البريد الإلكتروني"; if (!RegExp(r'^[^@]+@[^@]+\.[^@]+').hasMatch(value)) return "الرجاء إدخال بريد إلكتروني صحيح"; return null; }, ), SizedBox(height: 16), _buildTextFormField( controller: _passwordController, labelText: "كلمة المرور", icon: Icons.lock_outline, obscureText: _obscurePassword, suffixIcon: IconButton( icon: Icon(_obscurePassword ? Icons.visibility_off_outlined : Icons.visibility_outlined, color: Colors.grey), onPressed: () => setState(() => _obscurePassword = !_obscurePassword), ), validator: (value) { if (value == null || value.isEmpty) return "الرجاء إدخال كلمة المرور"; if (value.length < 6) return "يجب أن تكون كلمة المرور 6 أحرف على الأقل"; return null; }, ), SizedBox(height: 16), _buildTextFormField( controller: _confirmPasswordController, labelText: "تأكيد كلمة المرور", icon: Icons.lock_outline, obscureText: _obscureConfirmPassword, suffixIcon: IconButton( icon: Icon(_obscureConfirmPassword ? Icons.visibility_off_outlined : Icons.visibility_outlined, color: Colors.grey), onPressed: () => setState(() => _obscureConfirmPassword = !_obscureConfirmPassword), ), validator: (value) { if (value == null || value.isEmpty) return "الرجاء تأكيد كلمة المرور"; if (value != _passwordController.text) return "كلمتا المرور غير متطابقتين"; return null; }, ), SizedBox(height: 24), _buildDropdown(primaryColor), SizedBox(height: 32), _buildRegisterButton(primaryColor, accentColor), SizedBox(height: 20), _buildLoginLink(context, primaryColor), ], ), ), ), ), ), ), ), ), ), ); } Widget _buildTextFormField({ required TextEditingController controller, required String labelText, required IconData icon, TextInputType keyboardType = TextInputType.text, bool obscureText = false, Widget? suffixIcon, String? Function(String?)? validator, }) { return TextFormField( controller: controller, keyboardType: keyboardType, obscureText: obscureText, decoration: InputDecoration( labelText: labelText, prefixIcon: Icon(icon, color: Theme.of(context).primaryColor.withOpacity(0.7)), suffixIcon: suffixIcon, border: OutlineInputBorder(borderRadius: BorderRadius.circular(12.0)), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(12.0), borderSide: BorderSide(color: Theme.of(context).primaryColor, width: 2.0), ), filled: true, fillColor: Colors.grey[100], contentPadding: EdgeInsets.symmetric(vertical: 15.0, horizontal: 10.0), ), validator: validator, ); } Widget _buildDropdown(Color primaryColor) { return DropdownButtonFormField( value: _selectedRole, decoration: InputDecoration( labelText: "نوع الحساب", prefixIcon: Icon(Icons.person_outline, color: primaryColor.withOpacity(0.7)), border: OutlineInputBorder(borderRadius: BorderRadius.circular(12.0)), filled: true, fillColor: Colors.grey[100], contentPadding: EdgeInsets.symmetric(vertical: 15.0, horizontal: 10.0), ), items: ["user", "admin"].map((role) { return DropdownMenuItem( value: role, child: Text( role == "user" ? "مستخدم عادي" : "مسؤول (Admin)", style: TextStyle(fontSize: 16), ), ); }).toList(), onChanged: (String? newValue) { setState(() { _selectedRole = newValue!; }); }, ); } Widget _buildRegisterButton(Color primaryColor, Color accentColor) { return AnimatedContainer( duration: Duration(milliseconds: 300), height: 50, child: ElevatedButton( onPressed: _isLoading ? null : _register, // Disable button when loading style: ElevatedButton.styleFrom( backgroundColor: primaryColor, // Use primary color for button foregroundColor: Colors.white, // Text color shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(12.0), ), padding: EdgeInsets.zero, // Remove default padding to control content alignment elevation: _isLoading ? 0 : 5, // Reduce elevation when loading ), child: Center( child: _isLoading ? SizedBox( height: 24, width: 24, child: CircularProgressIndicator( valueColor: AlwaysStoppedAnimation(Colors.white), strokeWidth: 3, ), ) : Text( "إنشاء حساب", style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold), ), ), ), ); } Widget _buildLoginLink(BuildContext context, Color primaryColor) { return Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Text("لديك حساب بالفعل؟", style: TextStyle(color: Colors.grey[700])), TextButton( onPressed: _isLoading ? null : () => Navigator.pop(context), style: TextButton.styleFrom( padding: EdgeInsets.symmetric(horizontal: 4), // Reduce padding minimumSize: Size(0, 0), // Allow smaller size ), child: Text( "تسجيل الدخول", style: TextStyle( color: primaryColor, fontWeight: FontWeight.bold, ), ), ), ], ); } } import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'package:gonavi/services/auth_service.dart'; // Ensure this path is correct import 'package:gonavi/pages/registration_page.dart'; // Ensure this path is correct // Import other necessary pages like LoginPage, HomePage etc. void main() { // Ensure Flutter bindings are initialized (especially if using Firebase) // WidgetsFlutterBinding.ensureInitialized(); // await Firebase.initializeApp(); // If using Firebase runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { // Define a professional color scheme final Color primaryColor = Colors.teal; // Example primary color final Color accentColor = Colors.orangeAccent; // Example accent color return MultiProvider( providers: [ // Provide your AuthService instance Provider(create: (_) => AuthService()), // Add other providers if needed ], child: MaterialApp( title: 'GoNavi App', theme: ThemeData( primaryColor: primaryColor, colorScheme: ColorScheme.fromSwatch().copyWith( primary: primaryColor, secondary: accentColor, // Used for accent elements like FloatingActionButton brightness: Brightness.light, ), scaffoldBackgroundColor: Colors.grey[50], // Light background appBarTheme: AppBarTheme( backgroundColor: primaryColor, foregroundColor: Colors.white, // Title and icons color elevation: 4.0, ), elevatedButtonTheme: ElevatedButtonThemeData( style: ElevatedButton.styleFrom( backgroundColor: primaryColor, // Button background foregroundColor: Colors.white, // Button text color padding: EdgeInsets.symmetric(vertical: 12.0, horizontal: 20.0), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(8.0), ), textStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold), ), ), inputDecorationTheme: InputDecorationTheme( border: OutlineInputBorder( borderRadius: BorderRadius.circular(8.0), borderSide: BorderSide(color: Colors.grey[400]!), ), enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(8.0), borderSide: BorderSide(color: Colors.grey[400]!), ), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(8.0), borderSide: BorderSide(color: primaryColor, width: 2.0), ), labelStyle: TextStyle(color: Colors.grey[700]), prefixIconColor: Colors.grey[600], ), cardTheme: CardTheme( elevation: 4.0, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(12.0), ), ), textButtonTheme: TextButtonThemeData( style: TextButton.styleFrom( foregroundColor: primaryColor, // Text button color ), ), // Use a nice font if available (add to pubspec.yaml and assets) // fontFamily: 'YourCustomFont', ), debugShowCheckedModeBanner: false, // Set the initial route or home based on auth state // For demonstration, starting directly with RegistrationPage home: RegistrationPage(), // Define routes if you have multiple pages // routes: { // '/login': (context) => LoginPage(), // '/register': (context) => RegistrationPage(), // '/home': (context) => HomePage(), // }, ), ); } } **Key Changes:** 1. **`main.dart`:** * Defined a `ThemeData` with a `primaryColor` (Teal) and `accentColor` (OrangeAccent). * Configured default styles for `AppBar`, `ElevatedButton`, `InputDecoration`, `Card`, and `TextButton` to use the theme colors, providing a consistent look. * **(Important):** You'll need to ensure `AuthService` is correctly implemented and provided. If you're using Firebase, uncomment the initialization lines. 2. **`registration_page.dart`:** * **Gradient Background:** The `Scaffold`'s body is wrapped in a `Container` with a `LinearGradient`. * **Card UI:** The form is placed inside a `Card` for better visual separation and elevation. * **Logo Placeholder:** Added a `FlutterLogo` at the top (replace with your actual logo). * **Animations:** * `FadeTransition`: The main form content fades in when the page loads using `AnimationController`. * `AnimatedContainer`: The register button smoothly transitions its appearance (size/content) when `_isLoading` changes. It now shows a `CircularProgressIndicator` inside the button itself. * **Styling:** * Input fields (`_buildTextFormField`) have refined styling (borders, fill color, prefix icons). * Dropdown (`_buildDropdown`) is styled similarly to text fields. * Buttons and links (`_buildRegisterButton`, `_buildLoginLink`) use theme colors and have improved padding/styling. * **Dialogs:** Success and error dialogs (`_showSuccessDialog`, `_showErrorDialog`) are styled with icons and rounded corners. The success dialog now navigates back after confirmation. * **Error Handling:** Added basic parsing to show cleaner error messages from potential Firebase exceptions. * **Keyboard Management:** The keyboard is dismissed when the register button is pressed. Remember to replace placeholder paths (`gonavi/services/auth_service.dart`, etc.) with your actual project structure and potentially add a custom font if desired.