Okay, I will enhance the Flutter registration page to make it look more professional and user-friendly. This involves improving the layout, adding validation, refining the UI elements, and structuring the code better. import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'package:gonavi/services/auth_service.dart'; // Ensure AuthService is correctly imported class RegistrationPage extends StatefulWidget { @override _RegistrationPageState createState() => _RegistrationPageState(); } class _RegistrationPageState extends State { final _formKey = GlobalKey(); // Key for the form final _emailController = TextEditingController(); final _passwordController = TextEditingController(); final _confirmPasswordController = TextEditingController(); bool _isLoading = false; String _selectedRole = "user"; // Default role bool _obscurePassword = true; bool _obscureConfirmPassword = true; @override void dispose() { _emailController.dispose(); _passwordController.dispose(); _confirmPasswordController.dispose(); super.dispose(); } // Toggles password visibility void _togglePasswordVisibility() { setState(() { _obscurePassword = !_obscurePassword; }); } // Toggles confirm password visibility void _toggleConfirmPasswordVisibility() { setState(() { _obscureConfirmPassword = !_obscureConfirmPassword; }); } void _register() async { // Validate the form first if (!_formKey.currentState!.validate()) { return; // If form is not valid, stop registration } // Check if passwords match (already handled by validator, but good practice) if (_passwordController.text != _confirmPasswordController.text) { _showErrorDialog("كلمتا المرور غير متطابقتين!"); return; } setState(() => _isLoading = true); try { // Call the registration method from AuthService await Provider.of(context, listen: false).registerWithEmail( _emailController.text.trim(), _passwordController.text.trim(), _selectedRole, // Pass the selected role ); _showSuccessDialog(); // Optionally navigate away or clear fields after success // Navigator.of(context).pop(); // Example: Go back } catch (e) { // Handle specific errors or show a generic message _showErrorDialog("حدث خطأ أثناء التسجيل: ${e.toString()}"); } finally { // Ensure loading indicator is turned off if (mounted) { setState(() => _isLoading = false); } } } // Show a success dialog void _showSuccessDialog() { showDialog( context: context, barrierDismissible: false, // User must tap button to close builder: (context) => AlertDialog( title: Row( children: [ Icon(Icons.check_circle, color: Colors.green), SizedBox(width: 10), Text("نجاح"), ], ), content: Text("تم التسجيل بنجاح! يمكنك الآن تسجيل الدخول."), // Updated message actions: [ TextButton( onPressed: () { Navigator.of(context).pop(); // Close the dialog // Optionally navigate to login page // Navigator.of(context).pushReplacementNamed('/login'); }, child: Text("موافق"), ), ], ), ); } // Show an error dialog void _showErrorDialog(String message) { showDialog( context: context, builder: (context) => AlertDialog( title: Row( children: [ Icon(Icons.error, color: Colors.red), SizedBox(width: 10), Text("خطأ في التسجيل"), ], ), content: Text(message), actions: [ TextButton( onPressed: () => Navigator.of(context).pop(), // Close the dialog child: Text("موافق"), ), ], ), ); } @override Widget build(BuildContext context) { final theme = Theme.of(context); // Access theme for styling return Scaffold( appBar: AppBar( title: Text("إنشاء حساب جديد"), elevation: 1, // Subtle shadow ), body: Center( // Center the content vertically child: SingleChildScrollView( // Allows scrolling on smaller screens padding: const EdgeInsets.all(24.0), // Increased padding child: Form( // Use a Form widget for validation key: _formKey, child: Column( mainAxisAlignment: MainAxisAlignment.center, // Center column content crossAxisAlignment: CrossAxisAlignment.stretch, // Stretch widgets horizontally children: [ // Optional: Add a logo or header text Text( "مرحباً بك!", style: theme.textTheme.headlineMedium?.copyWith(fontWeight: FontWeight.bold), textAlign: TextAlign.center, ), SizedBox(height: 8), Text( "قم بإنشاء حسابك للمتابعة", style: theme.textTheme.titleMedium?.copyWith(color: Colors.grey[600]), textAlign: TextAlign.center, ), SizedBox(height: 32), // Email Field TextFormField( controller: _emailController, keyboardType: TextInputType.emailAddress, decoration: InputDecoration( labelText: "البريد الإلكتروني", hintText: "example@domain.com", prefixIcon: Icon(Icons.email_outlined), border: OutlineInputBorder( borderRadius: BorderRadius.circular(12), ), ), validator: (value) { if (value == null || value.isEmpty) { return "الرجاء إدخال البريد الإلكتروني"; } // Basic email validation regex if (!RegExp(r'^[^@]+@[^@]+\.[^@]+').hasMatch(value)) { return "الرجاء إدخال بريد إلكتروني صالح"; } return null; // Return null if valid }, ), SizedBox(height: 16), // Password Field TextFormField( controller: _passwordController, obscureText: _obscurePassword, decoration: InputDecoration( labelText: "كلمة المرور", hintText: "********", prefixIcon: Icon(Icons.lock_outline), suffixIcon: IconButton( icon: Icon( _obscurePassword ? Icons.visibility_off_outlined : Icons.visibility_outlined, ), onPressed: _togglePasswordVisibility, ), border: OutlineInputBorder( borderRadius: BorderRadius.circular(12), ), ), validator: (value) { if (value == null || value.isEmpty) { return "الرجاء إدخال كلمة المرور"; } if (value.length < 6) { return "يجب أن تكون كلمة المرور 6 أحرف على الأقل"; } return null; // Return null if valid }, ), SizedBox(height: 16), // Confirm Password Field TextFormField( controller: _confirmPasswordController, obscureText: _obscureConfirmPassword, decoration: InputDecoration( labelText: "تأكيد كلمة المرور", hintText: "********", prefixIcon: Icon(Icons.lock_outline), suffixIcon: IconButton( icon: Icon( _obscureConfirmPassword ? Icons.visibility_off_outlined : Icons.visibility_outlined, ), onPressed: _toggleConfirmPasswordVisibility, ), border: OutlineInputBorder( borderRadius: BorderRadius.circular(12), ), ), validator: (value) { if (value == null || value.isEmpty) { return "الرجاء تأكيد كلمة المرور"; } if (value != _passwordController.text) { return "كلمتا المرور غير متطابقتين"; } return null; // Return null if valid }, ), SizedBox(height: 24), // Role Selection Dropdown DropdownButtonFormField( value: _selectedRole, decoration: InputDecoration( labelText: "اختر نوع الحساب", prefixIcon: Icon(Icons.person_outline), border: OutlineInputBorder( borderRadius: BorderRadius.circular(12), ), ), items: ["user", "admin"].map((role) { return DropdownMenuItem( value: role, child: Text( role == "user" ? "مستخدم عادي" : "مسؤول (Admin)", style: TextStyle(fontSize: 16), ), ); }).toList(), onChanged: (String? newValue) { if (newValue != null) { setState(() { _selectedRole = newValue; }); } }, validator: (value) { if (value == null) { return "الرجاء اختيار نوع الحساب"; } return null; }, ), SizedBox(height: 32), // Registration Button _isLoading ? Center(child: CircularProgressIndicator()) // Show loading indicator : ElevatedButton( onPressed: _register, // Call the registration function style: ElevatedButton.styleFrom( padding: EdgeInsets.symmetric(vertical: 16), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(12), ), backgroundColor: theme.primaryColor, // Use primary color foregroundColor: Colors.white, // Text color ), child: Text( "إنشاء الحساب", style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold), ), ), SizedBox(height: 16), // Optional: Link to Login Page TextButton( onPressed: () { // Navigate to Login Page - Replace with your actual route Navigator.of(context).pop(); // Example: Go back // Navigator.pushNamed(context, '/login'); }, child: Text("لديك حساب بالفعل؟ تسجيل الدخول"), ), ], ), ), ), ), ); } } import 'package:flutter/foundation.dart'; // Replace with your actual Firebase Auth import if using Firebase // import 'package:firebase_auth/firebase_auth.dart'; // Mock AuthService for demonstration. Replace with your actual implementation. class AuthService with ChangeNotifier { // Example: Using a mock user state bool _isLoggedIn = false; String? _userRole; bool get isLoggedIn => _isLoggedIn; String? get userRole => _userRole; // Mock registration method Future registerWithEmail(String email, String password, String role) async { print('Attempting registration for: $email with role: $role'); // Simulate network delay await Future.delayed(Duration(seconds: 2)); // Simulate potential errors (e.g., email already exists) if (email.contains("fail")) { throw Exception("فشل التسجيل: البريد الإلكتروني مستخدم بالفعل (محاكاة)"); } // Simulate successful registration print('Registration successful for: $email'); // In a real app, you would typically: // 1. Call your backend/Firebase Auth to create the user. // 2. Store the user's role (e.g., in Firestore, database, or custom claims). // 3. Maybe automatically log the user in or require email verification. // For this example, we don't change the login state upon registration. // The user usually needs to log in separately after registering or verifying email. } // Mock login method (optional, for context) Future loginWithEmail(String email, String password) async { print('Attempting login for: $email'); await Future.delayed(Duration(seconds: 1)); if (email.contains("fail")) { throw Exception("فشل تسجيل الدخول: بيانات اعتماد غير صالحة (محاكاة)"); } _isLoggedIn = true; // Simulate fetching user role after login _userRole = email.contains("admin") ? "admin" : "user"; print('Login successful for: $email, Role: $_userRole'); notifyListeners(); // Notify listeners about the change in auth state } // Mock logout method (optional, for context) Future logout() async { print('Logging out'); await Future.delayed(Duration(milliseconds: 500)); _isLoggedIn = false; _userRole = null; notifyListeners(); } } import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'package:gonavi/services/auth_service.dart'; import 'package:gonavi/registration_page.dart'; // Import the registration page void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { // Provide the AuthService at the top of the widget tree return ChangeNotifierProvider( create: (context) => AuthService(), child: MaterialApp( title: 'GoNavi App', theme: ThemeData( primarySwatch: Colors.blue, // Or your preferred color theme visualDensity: VisualDensity.adaptivePlatformDensity, inputDecorationTheme: InputDecorationTheme( // Consistent input styling filled: true, fillColor: Colors.grey[100], // Light background for inputs contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 12), border: OutlineInputBorder( borderRadius: BorderRadius.circular(12), borderSide: BorderSide.none, // No border by default ), enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(12), borderSide: BorderSide(color: Colors.grey[300]!), // Subtle border when enabled ), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(12), borderSide: BorderSide(color: Theme.of(context).primaryColor, width: 1.5), // Highlight border when focused ), errorBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(12), borderSide: BorderSide(color: Colors.red, width: 1.5), // Red border on error ), focusedErrorBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(12), borderSide: BorderSide(color: Colors.red, width: 1.5), ), ), elevatedButtonTheme: ElevatedButtonThemeData( // Consistent button styling style: ElevatedButton.styleFrom( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(12), ), padding: EdgeInsets.symmetric(vertical: 14, horizontal: 20), textStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.w600), ) ) ), debugShowCheckedModeBanner: false, // Hide debug banner // Set the initial route or home widget home: RegistrationPage(), // Start with the Registration Page // Define routes if you have multiple pages // routes: { // '/login': (context) => LoginPage(), // '/register': (context) => RegistrationPage(), // '/home': (context) => HomePage(), // }, ), ); } } This updated code includes: 1. **Improved Layout:** Uses `SingleChildScrollView`, `Center`, `Padding`, and `SizedBox` for better spacing and responsiveness. 2. **Form Validation:** Implements a `Form` with `TextFormField` widgets and validators for email format, password length, and password confirmation matching. Error messages appear directly below the fields. 3. **Enhanced UI:** * Uses `InputDecoration` with `OutlineInputBorder`, icons (`prefixIcon`), and hint text. * Adds password visibility toggles (`suffixIcon`). * Styles the `DropdownButtonFormField` similarly to text fields. * Provides better styling for the `ElevatedButton`. * Adds header text and a link to a potential login page. * Includes basic theming in `main.dart` for consistent input and button styles. 4. **Refined Error/Success Handling:** Uses more informative dialogs with icons. 5. **State Management:** Continues using `StatefulWidget` for local UI state (`_isLoading`, `_obscurePassword`, etc.) and `Provider` for `AuthService`. 6. **Mock `AuthService`:** Includes a basic mock `AuthService` so the code can run. **Remember to replace this with your actual `AuthService` implementation (e.g., using Firebase Auth).** 7. **`main.dart` Setup:** Shows how to provide the `AuthService` and set the `RegistrationPage` as the home screen. Make sure you have the `provider` package added to your `pubspec.yaml`. You will also need to create the `AuthService` file (`lib/services/auth_service.dart`) or adapt the import path if it's located elsewhere.