Okay, I can help improve the `ProfilePage`. Here's the refined version incorporating image uploading to Firebase Storage, loading indicators, and better feedback: name: flutter_profile_app description: A simple Flutter profile app. publish_to: 'none' # Remove this line if you wish to publish to pub.dev version: 1.0.0+1 environment: sdk: '>=3.0.0 <4.0.0' # Adjusted SDK constraint dependencies: flutter: sdk: flutter provider: ^6.0.0 # State management image_picker: ^1.0.0 # For picking images firebase_core: ^2.0.0 # Required for Firebase firebase_auth: ^4.0.0 # Firebase Authentication firebase_storage: ^11.0.0 # Firebase Storage for images cupertino_icons: ^1.0.2 dev_dependencies: flutter_test: sdk: flutter flutter_lints: ^2.0.0 flutter: uses-material-design: true import 'package:flutter/material.dart'; import 'package:firebase_core/firebase_core.dart'; import 'package:provider/provider.dart'; import 'services/auth_service.dart'; import 'screens/profile_page.dart'; import 'screens/login_page.dart'; // Assuming you have a login page // Replace with your actual Firebase options // You can get this from your Firebase project settings const firebaseOptions = FirebaseOptions( apiKey: "YOUR_API_KEY", authDomain: "YOUR_AUTH_DOMAIN", projectId: "YOUR_PROJECT_ID", storageBucket: "YOUR_STORAGE_BUCKET", messagingSenderId: "YOUR_MESSAGING_SENDER_ID", appId: "YOUR_APP_ID", ); void main() async { WidgetsFlutterBinding.ensureInitialized(); // IMPORTANT: Initialize Firebase BEFORE runApp await Firebase.initializeApp( options: firebaseOptions, // Use your actual Firebase config ); runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return ChangeNotifierProvider( create: (_) => AuthService(), child: MaterialApp( title: 'Flutter Profile App', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: Consumer( builder: (context, authService, _) { // Simple check: if user is logged in, show ProfilePage, else LoginPage // In a real app, you might have more complex routing or a splash screen return authService.currentUser != null ? const ProfilePage() : const LoginPage(); // Navigate to LoginPage if not logged in }, ), routes: { '/login': (context) => const LoginPage(), '/profile': (context) => const ProfilePage(), // Add other routes as needed }, ), ); } } import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import '../services/auth_service.dart'; // Basic Placeholder Login Page class LoginPage extends StatefulWidget { const LoginPage({super.key}); @override State createState() => _LoginPageState(); } class _LoginPageState extends State { final TextEditingController _emailController = TextEditingController(); final TextEditingController _passwordController = TextEditingController(); bool _isLoading = false; String? _errorMessage; Future _signIn() async { setState(() { _isLoading = true; _errorMessage = null; }); try { final authService = Provider.of(context, listen: false); await authService.signInWithEmailPassword( _emailController.text.trim(), _passwordController.text.trim(), ); // Navigation happens automatically via the Consumer in main.dart } catch (e) { setState(() { _errorMessage = "Failed to sign in: ${e.toString()}"; }); } finally { if (mounted) { setState(() { _isLoading = false; }); } } } Future _signUp() async { setState(() { _isLoading = true; _errorMessage = null; }); try { final authService = Provider.of(context, listen: false); await authService.createUserWithEmailPassword( _emailController.text.trim(), _passwordController.text.trim(), ); // Optionally sign in the user automatically after sign up // await _signIn(); if (mounted) { ScaffoldMessenger.of(context).showSnackBar( const SnackBar(content: Text('Sign up successful! Please sign in.')), ); } } catch (e) { setState(() { _errorMessage = "Failed to sign up: ${e.toString()}"; }); } finally { if (mounted) { setState(() { _isLoading = false; }); } } } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('Login')), body: Padding( padding: const EdgeInsets.all(16.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ TextField( controller: _emailController, decoration: const InputDecoration(labelText: 'Email'), keyboardType: TextInputType.emailAddress, ), const SizedBox(height: 10), TextField( controller: _passwordController, decoration: const InputDecoration(labelText: 'Password'), obscureText: true, ), const SizedBox(height: 20), if (_errorMessage != null) Padding( padding: const EdgeInsets.only(bottom: 10.0), child: Text( _errorMessage!, style: const TextStyle(color: Colors.red), textAlign: TextAlign.center, ), ), if (_isLoading) const CircularProgressIndicator() else Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ ElevatedButton( onPressed: _signIn, child: const Text('Sign In'), ), ElevatedButton( onPressed: _signUp, style: ElevatedButton.styleFrom(backgroundColor: Colors.green), child: const Text('Sign Up'), ), ], ), ], ), ), ); } } import 'package:flutter/foundation.dart'; import 'package:firebase_auth/firebase_auth.dart'; import 'package:firebase_storage/firebase_storage.dart'; import 'dart:io'; class AuthService with ChangeNotifier { final FirebaseAuth _auth = FirebaseAuth.instance; final FirebaseStorage _storage = FirebaseStorage.instance; User? _user; AuthService() { _auth.authStateChanges().listen(_onAuthStateChanged); _user = _auth.currentUser; // Initialize user } User? get currentUser => _user; Future _onAuthStateChanged(User? user) async { _user = user; notifyListeners(); } Future signInWithEmailPassword(String email, String password) async { try { UserCredential result = await _auth.signInWithEmailAndPassword( email: email, password: password, ); _user = result.user; notifyListeners(); return _user; } catch (e) { if (kDebugMode) { print("Sign in error: $e"); } rethrow; // Rethrow the error to be handled in the UI } } Future createUserWithEmailPassword(String email, String password) async { try { UserCredential result = await _auth.createUserWithEmailAndPassword( email: email, password: password, ); // Don't automatically set _user here, let authStateChanges handle it // or require login after signup. // _user = result.user; // notifyListeners(); return result.user; } catch (e) { if (kDebugMode) { print("Sign up error: $e"); } rethrow; } } Future signOut() async { await _auth.signOut(); // _user is updated via _onAuthStateChanged listener } Future updateProfile({String? displayName, String? photoURL}) async { if (_user == null) return; try { await _user!.updateDisplayName(displayName); if (photoURL != null) { await _user!.updatePhotoURL(photoURL); } // Reload user data to get the updated info await _user!.reload(); _user = _auth.currentUser; // Refresh the local user cache notifyListeners(); // Notify listeners about the change } catch (e) { if (kDebugMode) { print("Error updating profile: $e"); } rethrow; } } Future uploadProfileImage(String userId, File imageFile) async { try { // Create a reference to the location you want to upload to Reference storageRef = _storage.ref().child('profile_images').child('$userId.jpg'); // Upload the file UploadTask uploadTask = storageRef.putFile(imageFile); // Wait for the upload to complete TaskSnapshot snapshot = await uploadTask; // Get the download URL String downloadUrl = await snapshot.ref.getDownloadURL(); return downloadUrl; } catch (e) { if (kDebugMode) { print("Error uploading profile image: $e"); } return null; // Return null or rethrow based on how you want to handle errors } } } import 'dart:io'; import 'package:flutter/material.dart'; import 'package:flutter/animation.dart'; import 'package:image_picker/image_picker.dart'; import 'package:provider/provider.dart'; import '../services/auth_service.dart'; class ProfilePage extends StatefulWidget { const ProfilePage({super.key}); @override _ProfilePageState createState() => _ProfilePageState(); } class _ProfilePageState extends State with SingleTickerProviderStateMixin { late AnimationController _controller; late Animation _avatarAnimation; late Animation _infoAnimation; // Removed background animation for simplicity, can be added back if needed // late Animation _bgAnimation; File? _selectedImage; bool _isUploading = false; // Track upload state bool _isUpdatingProfile = false; // Track profile update state final GlobalKey _formKey = GlobalKey(); @override void initState() { super.initState(); _controller = AnimationController( vsync: this, duration: const Duration(milliseconds: 800), ); _avatarAnimation = Tween( begin: 0, end: 1, ).animate(CurvedAnimation(parent: _controller, curve: Curves.elasticOut)); _infoAnimation = Tween( begin: const Offset(0, 0.5), end: Offset.zero, ).animate( CurvedAnimation( parent: _controller, curve: Curves.fastEaseInToSlowEaseOut, ), ); // _bgAnimation = ColorTween( // begin: Colors.blue[900], // end: Colors.blue[400], // ).animate(_controller); _controller.forward(); } Future _pickAndUploadImage() async { final authService = Provider.of(context, listen: false); final user = authService.currentUser; if (user == null) return; // Should not happen if on this page final pickedFile = await ImagePicker().pickImage( source: ImageSource.gallery, imageQuality: 50, // Optional: Compress image maxWidth: 800, // Optional: Resize image ); if (pickedFile != null) { setState(() { _selectedImage = File(pickedFile.path); _isUploading = true; // Start loading indicator }); try { final downloadUrl = await authService.uploadProfileImage( user.uid, _selectedImage!, ); if (downloadUrl != null) { await authService.updateProfile(photoURL: downloadUrl); if (mounted) { ScaffoldMessenger.of(context).showSnackBar( const SnackBar( content: Text('Profile picture updated successfully!'), backgroundColor: Colors.green, ), ); } } else { throw Exception("Failed to get download URL"); } } catch (e) { if (mounted) { ScaffoldMessenger.of(context).showSnackBar( SnackBar( content: Text('Failed to upload image: $e'), backgroundColor: Colors.red, ), ); } } finally { if (mounted) { setState(() { _isUploading = false; // Stop loading indicator // Keep _selectedImage to show preview until refresh or if upload failed }); } } } } @override Widget build(BuildContext context) { // Use Consumer to react to changes in AuthService (like profile updates) return Consumer( builder: (context, authService, child) { final user = authService.currentUser; // Determine the image provider, prioritizing local selection, then network URL ImageProvider? avatarImage; if (_selectedImage != null) { avatarImage = FileImage(_selectedImage!); } else if (user?.photoURL != null && user!.photoURL!.isNotEmpty) { avatarImage = NetworkImage(user.photoURL!); } return Scaffold( // backgroundColor: _bgAnimation.value, // Removed animated background backgroundColor: Colors.blue[100], // Simple background appBar: AppBar( title: const Text('الملف الشخصي'), backgroundColor: Colors.blue[800], actions: [ IconButton( icon: const Icon(Icons.logout), onPressed: () => _logout(context), ), ], ), body: SingleChildScrollView( child: Padding( padding: const EdgeInsets.all(20.0), child: Column( children: [ ScaleTransition( scale: _avatarAnimation, child: GestureDetector( onTap: _isUploading ? null : _pickAndUploadImage, // Disable tap during upload child: Stack( alignment: Alignment.center, children: [ CircleAvatar( radius: 70, backgroundColor: Colors.grey[300], backgroundImage: avatarImage, child: avatarImage == null && !_isUploading ? Icon(Icons.camera_alt, size: 40, color: Colors.grey[600]) : null, ), if (_isUploading) const CircularProgressIndicator(), ], ), ), ), const SizedBox(height: 30), SlideTransition( position: _infoAnimation, child: Column( children: [ _buildProfileItem( Icons.person, "الاسم", user?.displayName ?? "غير معروف", ), _buildProfileItem( Icons.email, "البريد الإلكتروني", user?.email ?? "غير متوفر", ), _buildProfileItem( Icons.phone, "الهاتف", user?.phoneNumber ?? "غير مسجل", ), _buildProfileItem( Icons.verified_user, "الحالة", user?.emailVerified ?? false ? "مُوثَّق" : "غير موثَّق", statusColor: user?.emailVerified ?? false ? Colors.green : Colors.orange, ), ], ), ), const SizedBox(height: 30), ElevatedButton.icon( icon: const Icon(Icons.edit), label: const Text("تعديل الملف الشخصي"), style: ElevatedButton.styleFrom( backgroundColor: Colors.amber[700], padding: const EdgeInsets.symmetric( horizontal: 30, vertical: 15, ), ), onPressed: _isUpdatingProfile ? null : () => _editProfile(context), ), if (_isUpdatingProfile) const Padding( padding: EdgeInsets.only(top: 16.0), child: CircularProgressIndicator(), ), ], ), ), ), ); }, ); } Widget _buildProfileItem( IconData icon, String title, String value, { Color statusColor = Colors.black87, // Slightly adjusted default color }) { return Card( elevation: 2, margin: const EdgeInsets.symmetric(vertical: 8), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)), child: ListTile( leading: Icon(icon, color: Theme.of(context).primaryColor), title: Text(title, style: const TextStyle(fontWeight: FontWeight.bold)), subtitle: Text( value, style: TextStyle(color: statusColor, fontSize: 15), ), ), ); } void _editProfile(BuildContext context) { final authService = Provider.of(context, listen: false); final currentUser = authService.currentUser; TextEditingController nameController = TextEditingController( text: currentUser?.displayName ?? '', ); // Add controllers for other fields if needed (e.g., phone number) showDialog( context: context, barrierDismissible: !_isUpdatingProfile, // Prevent dismissal during update builder: (context) => StatefulBuilder( // Use StatefulBuilder for dialog's own state builder: (context, setDialogState) { return AlertDialog( title: const Text("تعديل الملف الشخصي"), content: SingleChildScrollView( child: Form( key: _formKey, child: Column( mainAxisSize: MainAxisSize.min, children: [ TextFormField( controller: nameController, decoration: const InputDecoration( labelText: 'الاسم الكامل', border: OutlineInputBorder(), prefixIcon: Icon(Icons.person), ), validator: (value) { if (value == null || value.isEmpty) { return 'الرجاء إدخال الاسم'; } return null; }, ), // Add other fields here if needed const SizedBox(height: 15), if (_isUpdatingProfile) const Center(child: CircularProgressIndicator()), ], ), ), ), actions: [ TextButton( onPressed: _isUpdatingProfile ? null : () => Navigator.pop(context), child: const Text("إلغاء"), ), ElevatedButton( style: ElevatedButton.styleFrom( backgroundColor: Colors.blue[800], ), onPressed: _isUpdatingProfile ? null : () async { if (_formKey.currentState!.validate()) { setDialogState(() { // Update dialog state _isUpdatingProfile = true; }); setState(() { // Update page state (for button disable) _isUpdatingProfile = true; }); try { await authService.updateProfile( displayName: nameController.text.trim(), // Pass other fields if implemented ); if (mounted) { Navigator.pop(context); // Close dialog on success ScaffoldMessenger.of(context).showSnackBar( const SnackBar( content: Text('Profile updated successfully!'), backgroundColor: Colors.green, ), ); } } catch (e) { if (mounted) { ScaffoldMessenger.of(context).showSnackBar( SnackBar( content: Text('Failed to update profile: $e'), backgroundColor: Colors.red, ), ); } } finally { // Ensure state is reset in both dialog and page if(mounted) { setDialogState(() { _isUpdatingProfile = false; }); setState(() { _isUpdatingProfile = false; }); } } } }, child: const Text("حفظ التغييرات"), ), ], ); }, ), ); } Future _logout(BuildContext context) async { // Added confirmation dialog final confirm = await showDialog( context: context, builder: (context) => AlertDialog( title: const Text('تسجيل الخروج'), content: const Text('هل أنت متأكد أنك تريد تسجيل الخروج؟'), actions: [ TextButton( onPressed: () => Navigator.pop(context, false), child: const Text('إلغاء'), ), TextButton( onPressed: () => Navigator.pop(context, true), child: const Text('تأكيد'), ), ], ), ); if (confirm == true) { await Provider.of(context, listen: false).signOut(); // Navigator will automatically navigate to /login due to Consumer in main.dart // Ensure '/login' route exists and LoginPage is defined // The pushNamedAndRemoveUntil might still be needed depending on exact navigation flow // but the Consumer approach often handles this state change automatically. // Consider keeping it if the Consumer logic isn't sufficient for your full app structure. // Navigator.pushNamedAndRemoveUntil( // context, // '/login', // (Route route) => false, // ); } } @override void dispose() { _controller.dispose(); super.dispose(); } } **Key Improvements:** 1. **Firebase Setup:** Added `pubspec.yaml`, basic `main.dart` with Firebase initialization (remember to add your actual Firebase config!), and a placeholder `login_page.dart`. 2. **Image Upload:** * Uncommented `firebase_storage` import. * Implemented `_pickAndUploadImage` function. * Added `uploadProfileImage` method to `AuthService`. * Updates the user's `photoURL` in Firebase Auth via `AuthService.updateProfile` after successful upload. 3. **Loading Indicators:** Added `CircularProgressIndicator` while uploading the image and updating the profile name. Buttons are disabled during these operations. 4. **User Feedback:** Uses `ScaffoldMessenger.showSnackBar` to show success or error messages after image upload and profile updates. 5. **Error Handling:** Added basic `try-catch` blocks around Firebase operations. 6. **State Management:** * Uses `Consumer` in `ProfilePage`'s `build` method to automatically rebuild the UI when user data changes (e.g., after `updateProfile`). * Uses `StatefulBuilder` within the `_editProfile` dialog to manage the loading state specific to the dialog. 7. **Logout Confirmation:** Added a confirmation dialog before logging out. 8. **UI:** Removed the background animation for simplicity (can be re-added) and slightly tweaked item styling. The avatar now correctly prioritizes showing the locally selected image preview. 9. **Dependencies:** `pubspec.yaml` includes necessary Firebase and image picker dependencies. Remember to replace the placeholder `firebaseOptions` in `lib/main.dart` with your actual Firebase project configuration. You'll also need to set up Firebase Authentication (Email/Password) and Firebase Storage in your Firebase project console.