Feature/keep ratio while cropping

CHANGELOG.md

@@ -1,50 +1,55 @@
+## [0.0.12] - 2023-09-08
+
+- Fixed issues with Ratio and CustomImageCrop
+- Added fillCropSpace as CustomImageFit
+
 ## [0.0.11] - 2023-09-01
 
-* Added clipShapeOnCrop to prevent clipping the image to the crop shape
+- Added clipShapeOnCrop to prevent clipping the image to the crop shape
 
 ## [0.0.10] - 2023-08-17
 
-* Added didupdateWidget check to fix issues with updated images
+- Added didupdateWidget check to fix issues with updated images
 
 ## [0.0.9] - 2023-08-10
 
-* Added borderRadius
+- Added borderRadius
 
 ## [0.0.8] - 2023-08-10
 
-* Added pathPaint to customize the crop border style
+- Added pathPaint to customize the crop border style
 
 ## [0.0.7] - 2023-08-09
 
-* Added Ratio as new shape and arguments
+- Added Ratio as new shape and arguments
 
 ## [0.0.6]
 
-* Added new param to CustomImageCrop for new image fit types
+- Added new param to CustomImageCrop for new image fit types
 
 ## [0.0.5]
 
-* Added canRotate
-* Added customProgressIndicator
-* Added canScale
-* Added canMove
+- Added canRotate
+- Added customProgressIndicator
+- Added canScale
+- Added canMove
 
 ## [0.0.4]
 
-* Added documentation
+- Added documentation
 
 ## [0.0.3]
 
-* Fixed issue where cropped image's size depends on screen size used
-* Fixed issue where cropped image's quality is worse than original image
-* Updated to flutter 2.8.0
+- Fixed issue where cropped image's size depends on screen size used
+- Fixed issue where cropped image's quality is worse than original image
+- Updated to flutter 2.8.0
 
 ## [0.0.2]
 
-* Updated docs
+- Updated docs
 
 ## [0.0.1]
 
-* Added custom crop
-* Added Cicrle and Square crop shapes
-* Added Solid and Dotted painters for crop border
+- Added custom crop
+- Added Cicrle and Square crop shapes
+- Added Solid and Dotted painters for crop border

example/lib/main.dart

@@ -41,6 +41,7 @@ class MyHomePage extends StatefulWidget {
 class _MyHomePageState extends State<MyHomePage> {
   late CustomImageCropController controller;
   CustomCropShape _currentShape = CustomCropShape.Circle;
+  CustomImageFit _imageFit = CustomImageFit.fillCropSpace;
   final TextEditingController _widthController = TextEditingController();
   final TextEditingController _heightController = TextEditingController();
   final TextEditingController _radiusController = TextEditingController();
@@ -67,6 +68,12 @@ class _MyHomePageState extends State<MyHomePage> {
     });
   }
 
+  void _changeImageFit(CustomImageFit imageFit) {
+    setState(() {
+      _imageFit = imageFit;
+    });
+  }
+
   void _updateRatio() {
     setState(() {
       if (_widthController.text.isNotEmpty) {
@@ -102,17 +109,17 @@ class _MyHomePageState extends State<MyHomePage> {
                   ? Ratio(width: _width, height: _height)
                   : null,
               canRotate: true,
-              canMove: false,
-              canScale: false,
+              canMove: true,
+              canScale: true,
               borderRadius:
                   _currentShape == CustomCropShape.Ratio ? _radius : 0,
               customProgressIndicator: const CupertinoActivityIndicator(),
-              // use custom paint if needed
-              // pathPaint: Paint()
-              //   ..color = Colors.red
-              //   ..strokeWidth = 4.0
-              //   ..style = PaintingStyle.stroke
-              //   ..strokeJoin = StrokeJoin.round,
+              imageFit: _imageFit,
+              pathPaint: Paint()
+                ..color = Colors.red
+                ..strokeWidth = 4.0
+                ..style = PaintingStyle.stroke
+                ..strokeJoin = StrokeJoin.round,
             ),
           ),
           Row(
@@ -136,34 +143,51 @@ class _MyHomePageState extends State<MyHomePage> {
                   icon: const Icon(Icons.rotate_right),
                   onPressed: () =>
                       controller.addTransition(CropImageData(angle: pi / 4))),
-              IconButton(
-                icon: const Icon(Icons.crop),
-                onPressed: () async {
-                  final image = await controller.onCropImage();
-                  if (image != null) {
-                    Navigator.of(context).push(MaterialPageRoute(
-                        builder: (BuildContext context) =>
-                            ResultScreen(image: image)));
-                  }
-                },
-              ),
-              PopupMenuButton<CustomCropShape>(
+              PopupMenuButton(
                 icon: const Icon(Icons.crop_original),
                 onSelected: _changeCropShape,
                 itemBuilder: (BuildContext context) {
                   return CustomCropShape.values.map(
                     (shape) {
-                      return PopupMenuItem<CustomCropShape>(
+                      return PopupMenuItem(
                         value: shape,
                         child: getShapeIcon(shape),
                       );
                     },
                   ).toList();
                 },
               ),
+              PopupMenuButton(
+                icon: const Icon(Icons.fit_screen),
+                onSelected: _changeImageFit,
+                itemBuilder: (BuildContext context) {
+                  return CustomImageFit.values.map(
+                    (imageFit) {
+                      return PopupMenuItem(
+                        value: imageFit,
+                        child: Text(imageFit.label),
+                      );
+                    },
+                  ).toList();
+                },
+              ),
+              IconButton(
+                icon: const Icon(
+                  Icons.crop,
+                  color: Colors.green,
+                ),
+                onPressed: () async {
+                  final image = await controller.onCropImage();
+                  if (image != null) {
+                    Navigator.of(context).push(MaterialPageRoute(
+                        builder: (BuildContext context) =>
+                            ResultScreen(image: image)));
+                  }
+                },
+              ),
             ],
           ),
-          if (_currentShape == CustomCropShape.Ratio)
+          if (_currentShape == CustomCropShape.Ratio) ...[
             SizedBox(
               child: Row(
                 children: [
@@ -198,6 +222,7 @@ class _MyHomePageState extends State<MyHomePage> {
                 ],
               ),
             ),
+          ],
           SizedBox(height: MediaQuery.of(context).padding.bottom),
         ],
       ),
@@ -215,3 +240,26 @@ class _MyHomePageState extends State<MyHomePage> {
     }
   }
 }
+
+extension CustomImageFitExtension on CustomImageFit {
+  String get label {
+    switch (this) {
+      case CustomImageFit.fillCropSpace:
+        return 'Fill crop space';
+      case CustomImageFit.fitCropSpace:
+        return 'Fit crop space';
+      case CustomImageFit.fillCropHeight:
+        return 'Fill crop height';
+      case CustomImageFit.fillCropWidth:
+        return 'Fill crop width';
+      case CustomImageFit.fillVisibleSpace:
+        return 'Fill visible space';
+      case CustomImageFit.fitVisibleSpace:
+        return 'Fit visible space';
+      case CustomImageFit.fillVisibleHeight:
+        return 'Fill visible height';
+      case CustomImageFit.fillVisibleWidth:
+        return 'Fill visible width';
+    }
+  }
+}

example/lib/result_screen.dart

@@ -16,20 +16,36 @@ class ResultScreen extends StatelessWidget {
         title: const Text('Result'),
         systemOverlayStyle: SystemUiOverlayStyle.dark,
       ),
-      body: Center(
-        child: Column(
-          children: [
-            const Spacer(),
-            Image(
+      body: Stack(
+        children: [
+          Positioned.fill(
+            child: Container(
+                decoration: BoxDecoration(
+              gradient: LinearGradient(
+                colors: [
+                  Colors.blueGrey.shade400,
+                  Colors.blueGrey.shade600,
+                ],
+                begin: Alignment.topCenter,
+                end: Alignment.bottomCenter,
+              ),
+            )),
+          ),
+          Center(
+            child: Image(
               image: image,
             ),
-            ElevatedButton(
+          ),
+          Positioned(
+            bottom: 16,
+            left: 16,
+            right: 16,
+            child: ElevatedButton(
               child: const Text('Back'),
               onPressed: () => Navigator.of(context).pop(),
             ),
-            const Spacer(),
-          ],
-        ),
+          ),
+        ],
       ),
     );
   }

example/pubspec.lock

@@ -49,7 +49,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "0.0.9"
+    version: "0.0.12"
   fake_async:
     dependency: transitive
     description:

lib/src/calculators/calculate_crop_fit_params.dart

@@ -0,0 +1,122 @@
+import 'package:custom_image_crop/src/models/params_model.dart';
+import 'package:custom_image_crop/src/widgets/custom_image_crop_widget.dart';
+
+/// Returns params to use for displaying crop screen.
+CropFitParams calculateCropFitParams({
+  required double screenWidth,
+  required double screenHeight,
+  required double cropPercentage,
+  required int imageWidth,
+  required int imageHeight,
+  required CustomImageFit imageFit,
+  required double aspectRatio,
+}) {
+  /// the width of the area to crop
+  final double cropSizeWidth;
+
+  /// the height of the area to crop
+  final double cropSizeHeight;
+
+  /// used to adjust image scale
+  final double defaultScale;
+
+  switch (imageFit) {
+    case CustomImageFit.fillCropSpace:
+      if (screenWidth <= screenHeight * aspectRatio) {
+        cropSizeWidth = screenWidth * cropPercentage;
+        cropSizeHeight = cropSizeWidth / aspectRatio;
+        defaultScale = cropSizeWidth / imageWidth;
+      } else {
+        cropSizeHeight = screenHeight * cropPercentage;
+        cropSizeWidth = cropSizeHeight * aspectRatio;
+        defaultScale = cropSizeHeight / imageHeight;
+      }
+      break;
+
+    case CustomImageFit.fitCropSpace:
+      if (screenWidth <= screenHeight * aspectRatio) {
+        cropSizeWidth = screenWidth * cropPercentage;
+        cropSizeHeight = cropSizeWidth / aspectRatio;
+        defaultScale = cropSizeHeight / imageHeight;
+      } else {
+        cropSizeHeight = screenHeight * cropPercentage;
+        cropSizeWidth = cropSizeHeight * aspectRatio;
+        defaultScale = cropSizeWidth / imageWidth;
+      }
+      break;
+
+    case CustomImageFit.fillCropWidth:
+      if (screenWidth <= screenHeight * aspectRatio) {
+        cropSizeWidth = screenWidth * cropPercentage;
+        cropSizeHeight = cropSizeWidth / aspectRatio;
+      } else {
+        cropSizeHeight = screenHeight * cropPercentage;
+        cropSizeWidth = cropSizeHeight * aspectRatio;
+      }
+      defaultScale = cropSizeWidth / imageWidth;
+      break;
+
+    case CustomImageFit.fillCropHeight:
+      if (screenWidth <= screenHeight * aspectRatio) {
+        cropSizeWidth = screenWidth * cropPercentage;
+        cropSizeHeight = cropSizeWidth / aspectRatio;
+      } else {
+        cropSizeHeight = screenHeight * cropPercentage;
+        cropSizeWidth = cropSizeHeight * aspectRatio;
+      }
+      defaultScale = cropSizeHeight / imageHeight;
+      break;
+
+    case CustomImageFit.fitVisibleSpace:
+      if (screenWidth <= screenHeight * aspectRatio) {
+        cropSizeWidth = screenWidth * cropPercentage;
+        cropSizeHeight = cropSizeWidth / aspectRatio;
+        defaultScale = screenWidth / imageWidth;
+      } else {
+        cropSizeHeight = screenHeight * cropPercentage;
+        cropSizeWidth = cropSizeHeight * aspectRatio;
+        defaultScale = screenHeight / imageHeight;
+      }
+      break;
+
+    case CustomImageFit.fillVisibleSpace:
+      if (screenWidth <= screenHeight * aspectRatio) {
+        cropSizeWidth = screenWidth * cropPercentage;
+        cropSizeHeight = cropSizeWidth / aspectRatio;
+        defaultScale = screenHeight / imageHeight;
+      } else {
+        cropSizeHeight = screenHeight * cropPercentage;
+        cropSizeWidth = cropSizeHeight * aspectRatio;
+        defaultScale = screenWidth / imageWidth;
+      }
+      break;
+
+    case CustomImageFit.fillVisibleHeight:
+      if (screenWidth <= screenHeight * aspectRatio) {
+        cropSizeWidth = screenWidth * cropPercentage;
+        cropSizeHeight = cropSizeWidth / aspectRatio;
+      } else {
+        cropSizeHeight = screenHeight * cropPercentage;
+        cropSizeWidth = cropSizeHeight * aspectRatio;
+      }
+      defaultScale = screenHeight / imageHeight;
+      break;
+
+    case CustomImageFit.fillVisibleWidth:
+      if (screenWidth <= screenHeight * aspectRatio) {
+        cropSizeWidth = screenWidth * cropPercentage;
+        cropSizeHeight = cropSizeWidth / aspectRatio;
+      } else {
+        cropSizeHeight = screenHeight * cropPercentage;
+        cropSizeWidth = cropSizeHeight * aspectRatio;
+      }
+      defaultScale = screenWidth / imageWidth;
+      break;
+  }
+
+  return CropFitParams(
+    cropSizeWidth: cropSizeWidth,
+    cropSizeHeight: cropSizeHeight,
+    additionalScale: defaultScale,
+  );
+}