feat: Crop page: increase paddings (#5279)

* Crop page: increase paddings * Fix: regression on Product image page
openfoodfacts · Jun 20, 2024 · ebb90b1 · ebb90b1
1 parent da76dd2
commit ebb90b1
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 46 deletions.
diff --git a/packages/smooth_app/lib/pages/crop_page.dart b/packages/smooth_app/lib/pages/crop_page.dart
@@ -179,47 +179,52 @@ class _CropPageState extends State<CropPage> {
                   mainAxisAlignment: MainAxisAlignment.spaceBetween,
                   crossAxisAlignment: CrossAxisAlignment.center,
                   children: <Widget>[
-                    Row(
-                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                      children: <Widget>[
-                        if (!_isErasing)
-                          _IconButton(
-                            iconData: Icons.rotate_90_degrees_ccw_outlined,
-                            onPressed: () => setState(
-                              () {
-                                _controller.rotateLeft();
-                                _eraserModel.rotation = _controller.rotation;
-                              },
+                    Padding(
+                      padding: const EdgeInsetsDirectional.only(
+                        top: SMALL_SPACE,
+                      ),
+                      child: Row(
+                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                        children: <Widget>[
+                          if (!_isErasing)
+                            _IconButton(
+                              iconData: Icons.rotate_90_degrees_ccw_outlined,
+                              onPressed: () => setState(
+                                () {
+                                  _controller.rotateLeft();
+                                  _eraserModel.rotation = _controller.rotation;
+                                },
+                              ),
                             ),
-                          ),
-                        if (widget.cropHelper.enableEraser)
-                          _IconButton(
-                            iconData: _isErasing ? Icons.crop : Icons.brush,
-                            color: _isErasing ? null : EraserPainter.color,
-                            onPressed: () => setState(
-                              () => _isErasing = !_isErasing,
+                          if (widget.cropHelper.enableEraser)
+                            _IconButton(
+                              iconData: _isErasing ? Icons.crop : Icons.brush,
+                              color: _isErasing ? null : EraserPainter.color,
+                              onPressed: () => setState(
+                                () => _isErasing = !_isErasing,
+                              ),
                             ),
-                          ),
-                        if (_isErasing)
-                          _IconButton(
-                            iconData: Icons.undo,
-                            onPressed: _eraserModel.isEmpty
-                                ? null
-                                : () => setState(
-                                      () => _eraserModel.undo(),
-                                    ),
-                          ),
-                        if (!_isErasing)
-                          _IconButton(
-                            iconData: Icons.rotate_90_degrees_cw_outlined,
-                            onPressed: () => setState(
-                              () {
-                                _controller.rotateRight();
-                                _eraserModel.rotation = _controller.rotation;
-                              },
+                          if (_isErasing)
+                            _IconButton(
+                              iconData: Icons.undo,
+                              onPressed: _eraserModel.isEmpty
+                                  ? null
+                                  : () => setState(
+                                        () => _eraserModel.undo(),
+                                      ),
                             ),
-                          ),
-                      ],
+                          if (!_isErasing)
+                            _IconButton(
+                              iconData: Icons.rotate_90_degrees_cw_outlined,
+                              onPressed: () => setState(
+                                () {
+                                  _controller.rotateRight();
+                                  _eraserModel.rotation = _controller.rotation;
+                                },
+                              ),
+                            ),
+                        ],
+                      ),
                     ),
                     Expanded(
                       child: Stack(
@@ -275,12 +280,19 @@ class _CropPageState extends State<CropPage> {
                         ],
                       ),
                     ),
-                    Center(
-                      child: EditImageButton(
-                        iconData: widget.cropHelper.getProcessIcon(),
-                        label:
-                            widget.cropHelper.getProcessLabel(appLocalizations),
-                        onPressed: () async => _saveImageAndPop(),
+                    Padding(
+                      padding: const EdgeInsets.symmetric(
+                        horizontal: VERY_SMALL_SPACE,
+                        vertical: SMALL_SPACE,
+                      ),
+                      child: SizedBox(
+                        width: double.infinity,
+                        child: EditImageButton.center(
+                          iconData: widget.cropHelper.getProcessIcon(),
+                          label: widget.cropHelper
+                              .getProcessLabel(appLocalizations),
+                          onPressed: () async => _saveImageAndPop(),
+                        ),
                       ),
                     ),
                   ],

diff --git a/packages/smooth_app/lib/pages/product/edit_image_button.dart b/packages/smooth_app/lib/pages/product/edit_image_button.dart
@@ -9,12 +9,21 @@ class EditImageButton extends StatelessWidget {
     required this.label,
     required this.onPressed,
     this.borderWidth,
-  });
+  }) : _centerContent = false;
+
+  /// Centered version of the button.
+  const EditImageButton.center({
+    required this.iconData,
+    required this.label,
+    required this.onPressed,
+    this.borderWidth,
+  }) : _centerContent = true;
 
   final IconData iconData;
   final String label;
   final VoidCallback onPressed;
   final double? borderWidth;
+  final bool _centerContent;
 
   @override
   Widget build(BuildContext context) {
@@ -36,10 +45,18 @@ class EditImageButton extends StatelessWidget {
                     width: borderWidth!,
                   ),
                 ),
+          padding: _centerContent
+              ? MaterialStateProperty.all(
+                  const EdgeInsets.symmetric(
+                    vertical: LARGE_SPACE,
+                  ),
+                )
+              : null,
+          alignment: _centerContent ? AlignmentDirectional.center : null,
         ),
         onPressed: onPressed,
         label: SizedBox(
-          width: double.infinity,
+          width: !_centerContent ? double.infinity : null,
           child: Padding(
             padding: EdgeInsets.all(borderWidth ?? 0),
             child: AutoSizeText(