Tony/525 profile picture

lib/features/home/service/components/profile/profile_photo_crop_dialog.dart

@@ -0,0 +1,143 @@
+/// Profile photo crop dialog with square aspect ratio.
+///
+/// Copyright (C) 2026, Software Innovation Institute, ANU
+///
+/// Licensed under the GNU General Public License, Version 3 (the "License");
+///
+/// License: https://opensource.org/license/gpl-3-0
+//
+// This program is free software: you can redistribute it and/or modify it under
+// the terms of the GNU General Public License as published by the Free Software
+// Foundation, either version 3 of the License, or (at your option) any later
+// version.
+//
+// This program is distributed in the hope that it will be useful, but WITHOUT
+// ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+// FOR A PARTICULAR PURPOSE.  See the GNU General Public License for more
+// details.
+//
+// You should have received a copy of the GNU General Public License along with
+// this program.  If not, see <https://opensource.org/license/gpl-3-0>.
+///
+/// Authors: Tony Chen
+
+library;
+
+import 'dart:typed_data';
+
+import 'package:flutter/material.dart';
+
+import 'package:crop_your_image/crop_your_image.dart';
+
+/// Dialog for cropping a profile photo to a square region.
+
+class ProfilePhotoCropDialog extends StatefulWidget {
+  /// The image bytes to crop.
+
+  final Uint8List imageBytes;
+
+  /// Callback with the cropped image bytes (PNG format), or null if cancelled.
+
+  final void Function(Uint8List? croppedBytes) onCropped;
+
+  const ProfilePhotoCropDialog({
+    super.key,
+    required this.imageBytes,
+    required this.onCropped,
+  });
+
+  /// Shows the crop dialog and returns the cropped image bytes when confirmed.
+
+  static Future<Uint8List?> show(
+    BuildContext context,
+    Uint8List imageBytes,
+  ) async {
+    Uint8List? result;
+    await showDialog<void>(
+      context: context,
+      barrierDismissible: false,
+      builder: (BuildContext context) {
+        return ProfilePhotoCropDialog(
+          imageBytes: imageBytes,
+          onCropped: (cropped) {
+            result = cropped;
+            Navigator.of(context).pop();
+          },
+        );
+      },
+    );
+    return result;
+  }
+
+  @override
+  State<ProfilePhotoCropDialog> createState() => _ProfilePhotoCropDialogState();
+}
+
+class _ProfilePhotoCropDialogState extends State<ProfilePhotoCropDialog> {
+  final _cropController = CropController();
+  bool _isCropping = false;
+
+  void _onCrop() async {
+    if (_isCropping) return;
+    setState(() => _isCropping = true);
+    _cropController.crop();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return AlertDialog(
+      title: const Text('Crop Profile Photo'),
+      content: SizedBox(
+        width: 400,
+        height: 400,
+        child: Crop(
+          image: widget.imageBytes,
+          controller: _cropController,
+          aspectRatio: 1.0,
+          initialRectBuilder: InitialRectBuilder.withSizeAndRatio(
+            size: 0.8,
+            aspectRatio: 1.0,
+          ),
+          interactive: true,
+          onCropped: (result) {
+            switch (result) {
+              case CropSuccess(:final croppedImage):
+                widget.onCropped(croppedImage);
+              case CropFailure(:final cause):
+                if (mounted) {
+                  ScaffoldMessenger.of(context).showSnackBar(
+                    SnackBar(
+                      content: Text('Crop failed: $cause'),
+                      backgroundColor: Colors.red,
+                      duration: const Duration(seconds: 5),
+                    ),
+                  );
+                  widget.onCropped(null);
+                }
+            }
+            if (mounted) {
+              setState(() => _isCropping = false);
+            }
+          },
+          progressIndicator: const Center(child: CircularProgressIndicator()),
+        ),
+      ),
+      actions: [
+        TextButton(
+          onPressed: _isCropping ? null : () => widget.onCropped(null),
+          child: const Text('Cancel'),
+        ),
+        FilledButton(
+          onPressed: _isCropping ? null : _onCrop,
+          child: _isCropping
+              ? const SizedBox(
+                  width: 20,
+                  height: 20,
+                  child: CircularProgressIndicator(strokeWidth: 2),
+                )
+              : const Text('Crop & Save'),
+        ),
+      ],
+    );
+  }
+}

lib/features/home/service/components/profile/profile_photo_manager.dart

@@ -25,6 +25,8 @@ library;
 
 import 'package:flutter/material.dart';
 
+import 'package:healthpod/features/home/service/components/profile/'
+    'profile_photo_crop_dialog.dart';
 import 'package:healthpod/utils/profile_photo_handler.dart';
 
 /// Manages profile photo operations including loading, uploading, and deleting.
@@ -38,6 +40,7 @@ class ProfilePhotoManager {
     String userName,
     Function(ImageProvider?) onPhotoChanged,
     Function() onDataChanged,
+    void Function(bool) onUploadingChange,
     bool isLoading,
     bool isSaving,
     bool isLoadingPhoto,
@@ -47,71 +50,79 @@ class ProfilePhotoManager {
       return;
     }
 
+    final parentContext = context;
+
     await showDialog<void>(
       context: context,
-      builder: (BuildContext context) {
+      builder: (BuildContext dialogContext) {
         return AlertDialog(
           title: const Text('Profile Photo'),
           content: SingleChildScrollView(
             child: Column(
               mainAxisSize: MainAxisSize.min,
               children: [
-                // Display current photo or avatar.
+                // Display current photo or avatar in circular frame.
+
                 SizedBox(
                   height: 100,
                   width: 100,
                   child: ProfilePhotoHandler.buildProfileAvatar(
-                    context: context,
+                    context: dialogContext,
                     photo: profilePhoto,
                     name: userName,
                     radius: 50,
                   ),
                 ),
                 const SizedBox(height: 20),
 
-                // Photo action buttons.
+                // Photo action buttons: upload (JPG/PNG, max 2 MB) or remove.
+
                 Row(
                   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                   children: [
                     ElevatedButton.icon(
                       onPressed: () {
-                        Navigator.pop(context);
+                        Navigator.pop(dialogContext);
                         _handlePhotoUpload(
-                          context,
+                          parentContext,
                           onPhotoChanged,
                           onDataChanged,
+                          onUploadingChange,
                         );
                       },
                       icon: const Icon(Icons.photo_camera),
                       label: const Text('Upload New'),
                     ),
-                    if (profilePhoto != null)
+                    if (profilePhoto != null) ...[
+                      const SizedBox(width: 12),
                       ElevatedButton.icon(
                         onPressed: () {
-                          Navigator.pop(context);
+                          Navigator.pop(dialogContext);
                           _handlePhotoDelete(
-                            context,
+                            parentContext,
                             onPhotoChanged,
                             onDataChanged,
                           );
                         },
                         icon: const Icon(Icons.delete),
                         label: const Text('Remove'),
                         style: ElevatedButton.styleFrom(
-                          backgroundColor: Theme.of(context).colorScheme.error,
+                          backgroundColor:
+                              Theme.of(dialogContext).colorScheme.error,
                           foregroundColor: Theme.of(
-                            context,
+                            dialogContext,
                           ).colorScheme.onError,
                         ),
                       ),
+                    ],
                   ],
                 ),
               ],
             ),
           ),
           actions: [
             TextButton(
-              onPressed: () => Navigator.of(context).pop(),
+              onPressed: () => Navigator.of(dialogContext).pop(),
               child: const Text('Close'),
             ),
           ],
@@ -126,48 +137,68 @@ class ProfilePhotoManager {
     BuildContext context,
     Function(ImageProvider?) onPhotoChanged,
     Function() onDataChanged,
+    void Function(bool) onUploadingChange,
   ) async {
     try {
-      final imageFile = await ProfilePhotoHandler.pickProfilePhoto();
+      // Pick image with validation.
 
-      if (imageFile != null && context.mounted) {
-        final success = await ProfilePhotoHandler.uploadProfilePhoto(
-          imageFile,
-          context,
-        );
+      final picked = await ProfilePhotoHandler.pickProfilePhoto(context);
 
-        if (success && context.mounted) {
-          ScaffoldMessenger.of(context).showSnackBar(
-            const SnackBar(
-              content: Text('Profile photo uploaded successfully'),
-              backgroundColor: Colors.green,
-            ),
-          );
+      if (picked == null || !context.mounted) {
+        return;
+      }
 
-          // Cleanup old photos.
+      // Show crop dialog for user to select square region.
 
-          if (context.mounted) {
-            await ProfilePhotoHandler.cleanupOldProfilePhotos(context);
-          }
+      final croppedBytes = await ProfilePhotoCropDialog.show(
+        context,
+        picked.bytes,
+      );
 
-          // Reload the photo.
+      if (croppedBytes == null || !context.mounted) {
+        return;
+      }
 
-          if (context.mounted) {
-            final newPhoto = await ProfilePhotoHandler.getProfilePhoto();
-            onPhotoChanged(newPhoto);
-          }
+      onUploadingChange(true);
 
-          // Notify parent of data change.
+      // Upload cropped image to pod (stored in data/profile folder).
 
-          onDataChanged();
+      final success = await ProfilePhotoHandler.uploadProfilePhoto(
+        croppedBytes,
+        'png',
+        context,
+      );
+
+      onUploadingChange(false);
+
+      if (success && context.mounted) {
+        ScaffoldMessenger.of(context).showSnackBar(
+          const SnackBar(
+            content: Text('Profile photo uploaded successfully'),
+            backgroundColor: Colors.green,
+            duration: Duration(seconds: 5),
+          ),
+        );
+
+        if (context.mounted) {
+          await ProfilePhotoHandler.cleanupOldProfilePhotos(context);
         }
+
+        if (context.mounted) {
+          final newPhoto = await ProfilePhotoHandler.getProfilePhoto();
+          onPhotoChanged(newPhoto);
+        }
+
+        onDataChanged();
       }
     } catch (e) {
+      onUploadingChange(false);
       if (context.mounted) {
         ScaffoldMessenger.of(context).showSnackBar(
           SnackBar(
             content: Text('Failed to upload photo: ${e.toString()}'),
             backgroundColor: Colors.red,
+            duration: const Duration(seconds: 5),
           ),
         );
       }
@@ -190,6 +221,7 @@ class ProfilePhotoManager {
             const SnackBar(
               content: Text('Profile photo removed'),
               backgroundColor: Colors.green,
+              duration: Duration(seconds: 5),
             ),
           );
 
@@ -208,6 +240,7 @@ class ProfilePhotoManager {
           SnackBar(
             content: Text('Failed to delete photo: ${e.toString()}'),
             backgroundColor: Colors.red,
+            duration: const Duration(seconds: 5),
           ),
         );
       }

lib/features/home/service/components/profile_details.dart

@@ -79,7 +79,7 @@ class _ProfileDetailsState extends State<ProfileDetails> {
   bool _isLoading = true;
   bool _isSaving = false;
   bool _isLoadingPhoto = true;
-  final bool _isUploadingPhoto = false;
+  bool _isUploadingPhoto = false;
   ImageProvider? _profilePhoto;
 
   // Holds full profile data.
@@ -453,6 +453,13 @@ class _ProfileDetailsState extends State<ProfileDetails> {
         }
       },
       widget.onDataChanged,
+      (isUploading) {
+        if (mounted) {
+          setState(() {
+            _isUploadingPhoto = isUploading;
+          });
+        }
+      },
       _isLoading,
       _isSaving,
       _isLoadingPhoto,