fix(mobile): navigation panel overlaps with right rotate (#12950)

fix: navigation panel overlaps with right rotate
immich-app · Sep 27, 2024 · 42ad3e6 · 42ad3e6
1 parent a6e703e
commit 42ad3e6
Showing 1 changed file with 93 additions and 91 deletions.
diff --git a/mobile/lib/pages/editing/crop.page.dart b/mobile/lib/pages/editing/crop.page.dart
@@ -51,107 +51,109 @@ class CropImagePage extends HookWidget {
         ],
       ),
       backgroundColor: context.scaffoldBackgroundColor,
-      body: LayoutBuilder(
-        builder: (BuildContext context, BoxConstraints constraints) {
-          return Column(
-            children: [
-              Container(
-                padding: const EdgeInsets.only(top: 20),
-                width: constraints.maxWidth * 0.9,
-                height: constraints.maxHeight * 0.6,
-                child: CropImage(
-                  controller: cropController,
-                  image: image,
-                  gridColor: Colors.white,
+      body: SafeArea(
+        child: LayoutBuilder(
+          builder: (BuildContext context, BoxConstraints constraints) {
+            return Column(
+              children: [
+                Container(
+                  padding: const EdgeInsets.only(top: 20),
+                  width: constraints.maxWidth * 0.9,
+                  height: constraints.maxHeight * 0.6,
+                  child: CropImage(
+                    controller: cropController,
+                    image: image,
+                    gridColor: Colors.white,
+                  ),
                 ),
-              ),
-              Expanded(
-                child: Container(
-                  width: double.infinity,
-                  decoration: BoxDecoration(
-                    color: context.scaffoldBackgroundColor,
-                    borderRadius: const BorderRadius.only(
-                      topLeft: Radius.circular(20),
-                      topRight: Radius.circular(20),
+                Expanded(
+                  child: Container(
+                    width: double.infinity,
+                    decoration: BoxDecoration(
+                      color: context.scaffoldBackgroundColor,
+                      borderRadius: const BorderRadius.only(
+                        topLeft: Radius.circular(20),
+                        topRight: Radius.circular(20),
+                      ),
                     ),
-                  ),
-                  child: Center(
-                    child: Column(
-                      mainAxisAlignment: MainAxisAlignment.center,
-                      children: [
-                        Padding(
-                          padding: const EdgeInsets.only(
-                            left: 20,
-                            right: 20,
-                            bottom: 10,
-                          ),
-                          child: Row(
-                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                            children: [
-                              IconButton(
-                                icon: Icon(
-                                  Icons.rotate_left,
-                                  color: Theme.of(context).iconTheme.color,
+                    child: Center(
+                      child: Column(
+                        mainAxisAlignment: MainAxisAlignment.center,
+                        children: [
+                          Padding(
+                            padding: const EdgeInsets.only(
+                              left: 20,
+                              right: 20,
+                              bottom: 10,
+                            ),
+                            child: Row(
+                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                              children: [
+                                IconButton(
+                                  icon: Icon(
+                                    Icons.rotate_left,
+                                    color: Theme.of(context).iconTheme.color,
+                                  ),
+                                  onPressed: () {
+                                    cropController.rotateLeft();
+                                  },
                                 ),
-                                onPressed: () {
-                                  cropController.rotateLeft();
-                                },
-                              ),
-                              IconButton(
-                                icon: Icon(
-                                  Icons.rotate_right,
-                                  color: Theme.of(context).iconTheme.color,
+                                IconButton(
+                                  icon: Icon(
+                                    Icons.rotate_right,
+                                    color: Theme.of(context).iconTheme.color,
+                                  ),
+                                  onPressed: () {
+                                    cropController.rotateRight();
+                                  },
                                 ),
-                                onPressed: () {
-                                  cropController.rotateRight();
-                                },
+                              ],
+                            ),
+                          ),
+                          Row(
+                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                            children: <Widget>[
+                              _AspectRatioButton(
+                                cropController: cropController,
+                                aspectRatio: aspectRatio,
+                                ratio: null,
+                                label: 'Free',
+                              ),
+                              _AspectRatioButton(
+                                cropController: cropController,
+                                aspectRatio: aspectRatio,
+                                ratio: 1.0,
+                                label: '1:1',
+                              ),
+                              _AspectRatioButton(
+                                cropController: cropController,
+                                aspectRatio: aspectRatio,
+                                ratio: 16.0 / 9.0,
+                                label: '16:9',
+                              ),
+                              _AspectRatioButton(
+                                cropController: cropController,
+                                aspectRatio: aspectRatio,
+                                ratio: 3.0 / 2.0,
+                                label: '3:2',
+                              ),
+                              _AspectRatioButton(
+                                cropController: cropController,
+                                aspectRatio: aspectRatio,
+                                ratio: 7.0 / 5.0,
+                                label: '7:5',
                               ),
                             ],
                           ),
-                        ),
-                        Row(
-                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-                          children: <Widget>[
-                            _AspectRatioButton(
-                              cropController: cropController,
-                              aspectRatio: aspectRatio,
-                              ratio: null,
-                              label: 'Free',
-                            ),
-                            _AspectRatioButton(
-                              cropController: cropController,
-                              aspectRatio: aspectRatio,
-                              ratio: 1.0,
-                              label: '1:1',
-                            ),
-                            _AspectRatioButton(
-                              cropController: cropController,
-                              aspectRatio: aspectRatio,
-                              ratio: 16.0 / 9.0,
-                              label: '16:9',
-                            ),
-                            _AspectRatioButton(
-                              cropController: cropController,
-                              aspectRatio: aspectRatio,
-                              ratio: 3.0 / 2.0,
-                              label: '3:2',
-                            ),
-                            _AspectRatioButton(
-                              cropController: cropController,
-                              aspectRatio: aspectRatio,
-                              ratio: 7.0 / 5.0,
-                              label: '7:5',
-                            ),
-                          ],
-                        ),
-                      ],
+                        ],
+                      ),
                     ),
                   ),
                 ),
-              ),
-            ],
-          );
-        },
+              ],
+            );
+          },
+        ),
       ),
     );
   }