fix(mobile): Fixes bottom exif info sheet modal drag controls (#7165)

* WIPip

* Fixed show modal bottom sheet to use drag handle

* Fixes advanced bottom sheet scrolling

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>

mobile/lib/modules/asset_viewer/ui/advanced_bottom_sheet.dart

@@ -12,14 +12,6 @@ class AdvancedBottomSheet extends HookConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     return SingleChildScrollView(
-      child: Card(
-        shape: const RoundedRectangleBorder(
-          borderRadius: BorderRadius.only(
-            topLeft: Radius.circular(15),
-            topRight: Radius.circular(15),
-          ),
-        ),
-        margin: const EdgeInsets.all(0),
       child: Container(
         margin: const EdgeInsets.symmetric(horizontal: 8.0),
         child: LayoutBuilder(
@@ -28,7 +20,6 @@ class AdvancedBottomSheet extends HookConsumerWidget {
             return Column(
               crossAxisAlignment: CrossAxisAlignment.stretch,
               children: [
-                  const SizedBox(height: 32.0),
                 const Align(
                   child: Text(
                     "ADVANCED INFO",
@@ -52,20 +43,23 @@ class AdvancedBottomSheet extends HookConsumerWidget {
                     ),
                     child: ListView(
                       shrinkWrap: true,
+                      physics: const NeverScrollableScrollPhysics(),
                       children: [
                         Align(
                           alignment: Alignment.centerRight,
                           child: IconButton(
                             onPressed: () {
                               Clipboard.setData(
-                                  ClipboardData(text: assetDetail.toString()),
+                                ClipboardData(
+                                  text: assetDetail.toString(),
+                                ),
                               ).then((_) {
                                 ScaffoldMessenger.of(context).showSnackBar(
                                   SnackBar(
                                     content: Text(
                                       "Copied to clipboard",
-                                        style: context.textTheme.bodyLarge
+                                      style:
-                                            ?.copyWith(
+                                          context.textTheme.bodyLarge?.copyWith(
                                         color: context.primaryColor,
                                       ),
                                     ),
@@ -99,7 +93,6 @@ class AdvancedBottomSheet extends HookConsumerWidget {
           },
         ),
       ),
-      ),
     );
   }
 }

mobile/lib/modules/asset_viewer/ui/exif_bottom_sheet.dart

@@ -10,7 +10,6 @@ import 'package:immich_mobile/modules/asset_viewer/ui/description_input.dart';
 import 'package:immich_mobile/modules/map/widgets/map_thumbnail.dart';
 import 'package:immich_mobile/shared/models/asset.dart';
 import 'package:immich_mobile/shared/providers/asset.provider.dart';
-import 'package:immich_mobile/shared/ui/drag_sheet.dart';
 import 'package:immich_mobile/utils/selection_handlers.dart';
 import 'package:immich_mobile/utils/bytes_units.dart';
 import 'package:maplibre_gl/maplibre_gl.dart';
@@ -126,20 +125,6 @@ class ExifBottomSheet extends HookConsumerWidget {
       return text.isNotEmpty ? text : null;
     }
 
-    buildDragHeader() {
-      return const Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          SizedBox(height: 12),
-          Align(
-            alignment: Alignment.center,
-            child: CustomDraggingHandle(),
-          ),
-          SizedBox(height: 12),
-        ],
-      );
-    }
-
     buildLocation() {
       // Guard no lat/lng
       if (!hasCoordinates()) {
@@ -341,46 +326,32 @@ class ExifBottomSheet extends HookConsumerWidget {
       );
     }
 
-    return GestureDetector(
+    return SingleChildScrollView(
-      onTap: () {
+      padding: const EdgeInsets.symmetric(horizontal: 8.0),
-        // FocusScope.of(context).unfocus();
-      },
-      child: SingleChildScrollView(
-        child: Card(
-          shape: const RoundedRectangleBorder(
-            borderRadius: BorderRadius.only(
-              topLeft: Radius.circular(15),
-              topRight: Radius.circular(15),
-            ),
-          ),
-          margin: const EdgeInsets.all(0),
       child: Container(
         margin: const EdgeInsets.symmetric(horizontal: 16.0),
         child: LayoutBuilder(
           builder: (context, constraints) {
             if (constraints.maxWidth > 600) {
               // Two column
-                  return Padding(
+              return Column(
-                    padding: const EdgeInsets.symmetric(horizontal: 12.0),
+                mainAxisSize: MainAxisSize.min,
-                    child: Column(
                 crossAxisAlignment: CrossAxisAlignment.stretch,
                 children: [
-                        buildDragHeader(),
                   buildDate(),
                   if (asset.isRemote) DescriptionInput(asset: asset),
                   Row(
-                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                    mainAxisAlignment: MainAxisAlignment.start,
                     crossAxisAlignment: CrossAxisAlignment.start,
                     children: [
-                            Flexible(
+                      Expanded(
-                              flex: hasCoordinates() ? 5 : 0,
                         child: Padding(
                           padding: const EdgeInsets.only(right: 8.0),
                           child: buildLocation(),
                         ),
                       ),
-                            Flexible(
+                      ConstrainedBox(
-                              flex: 5,
+                        constraints: const BoxConstraints(maxWidth: 300),
                         child: Padding(
                           padding: const EdgeInsets.only(left: 8.0),
                           child: buildDetail(),
@@ -390,15 +361,14 @@ class ExifBottomSheet extends HookConsumerWidget {
                   ),
                   const SizedBox(height: 50),
                 ],
-                    ),
               );
             }
 
             // One column
             return Column(
+              mainAxisSize: MainAxisSize.min,
               crossAxisAlignment: CrossAxisAlignment.stretch,
               children: [
-                    buildDragHeader(),
                 buildDate(),
                 assetWithExif.when(
                   data: (data) => DescriptionInput(asset: data),
@@ -421,8 +391,6 @@ class ExifBottomSheet extends HookConsumerWidget {
           },
         ),
       ),
-        ),
-      ),
     );
   }
 }

mobile/lib/modules/asset_viewer/views/gallery_viewer.dart

@@ -136,6 +136,7 @@ class GalleryViewerPage extends HookConsumerWidget {
         // swallow error silently
         debugPrint('Error precaching next image: $exception, $stackTrace');
       }
+
       if (index < totalAssets && index >= 0) {
         final asset = loadAsset(index);
         precacheImage(
@@ -152,10 +153,11 @@ class GalleryViewerPage extends HookConsumerWidget {
           borderRadius: BorderRadius.all(Radius.circular(15.0)),
         ),
         barrierColor: Colors.transparent,
-        backgroundColor: Colors.transparent,
         isScrollControlled: true,
-        useSafeArea: true,
+        showDragHandle: true,
+        enableDrag: true,
         context: context,
+        useSafeArea: true,
         builder: (context) {
           return Padding(
             padding: EdgeInsets.only(