closes CustomCropShape - Ratio #24

Author: Skandar Munir Ahmed

example/lib/main.dart

@@ -40,6 +40,12 @@ class MyHomePage extends StatefulWidget {
 
 class _MyHomePageState extends State<MyHomePage> {
   late CustomImageCropController controller;
+  CustomCropShape _currentShape = CustomCropShape.Circle;
+  final TextEditingController _widthController = TextEditingController();
+  final TextEditingController _heightController = TextEditingController();
+
+  double _width = 16;
+  double _height = 9;
 
   @override
   void initState() {
@@ -53,6 +59,24 @@ class _MyHomePageState extends State<MyHomePage> {
     super.dispose();
   }
 
+  void _changeCropShape(CustomCropShape newShape) {
+    setState(() {
+      _currentShape = newShape;
+    });
+  }
+
+  void _updateRatio() {
+    setState(() {
+      if (_widthController.text.isNotEmpty) {
+        _width = double.tryParse(_widthController.text) ?? 16;
+      }
+      if (_heightController.text.isNotEmpty) {
+        _height = double.tryParse(_heightController.text) ?? 9;
+      }
+    });
+    FocusScope.of(context).unfocus();
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
@@ -62,20 +86,54 @@ class _MyHomePageState extends State<MyHomePage> {
       ),
       body: Column(
         children: [
+          // SizedBox(
+          //   height: 40,
+          //   child: Row(
+          //     mainAxisAlignment: MainAxisAlignment.center,
+          //     children: [
+          //       IconButton(
+          //         icon: const Icon(Icons.crop_free),
+          //         color: _currentShape == CustomCropShape.Circle
+          //             ? Colors.blue
+          //             : Colors.grey,
+          //         onPressed: () => _changeCropShape(CustomCropShape.Circle),
+          //       ),
+          //       IconButton(
+          //         icon: const Icon(Icons.crop_square),
+          //         color: _currentShape == CustomCropShape.Square
+          //             ? Colors.blue
+          //             : Colors.grey,
+          //         onPressed: () => _changeCropShape(CustomCropShape.Square),
+          //       ),
+          //       IconButton(
+          //         icon: const Icon(Icons.crop_16_9),
+          //         color: _currentShape == CustomCropShape.Ratio
+          //             ? Colors.blue
+          //             : Colors.grey,
+          //         onPressed: () => _changeCropShape(CustomCropShape.Ratio),
+          //       ),
+          //     ],
+          //   ),
+          // ),
+
           Expanded(
             child: CustomImageCrop(
               cropController: controller,
               // image: const AssetImage('assets/test.png'), // Any Imageprovider will work, try with a NetworkImage for example...
               image: const NetworkImage(
                   'https://upload.wikimedia.org/wikipedia/en/7/7d/Lenna_%28test_image%29.png'),
-              shape: CustomCropShape.Square,
+              shape: _currentShape,
+              ratio: _currentShape == CustomCropShape.Ratio
+                  ? Ratio(width: _width, height: _height)
+                  : null,
               canRotate: true,
               canMove: false,
               canScale: false,
               customProgressIndicator: const CupertinoActivityIndicator(),
             ),
           ),
           Row(
+            mainAxisAlignment: MainAxisAlignment.spaceAround,
             children: [
               IconButton(
                   icon: const Icon(Icons.refresh), onPressed: controller.reset),
@@ -106,11 +164,61 @@ class _MyHomePageState extends State<MyHomePage> {
                   }
                 },
               ),
+              PopupMenuButton<CustomCropShape>(
+                icon: const Icon(Icons.crop_original),
+                onSelected: _changeCropShape,
+                itemBuilder: (BuildContext context) {
+                  return CustomCropShape.values.map((shape) {
+                    return PopupMenuItem<CustomCropShape>(
+                      value: shape,
+                      child: getShapeIcon(shape),
+                    );
+                  }).toList();
+                },
+              )
             ],
           ),
+          if (_currentShape == CustomCropShape.Ratio)
+            SizedBox(
+              child: Row(
+                children: [
+                  Expanded(
+                    child: TextField(
+                      controller: _widthController,
+                      keyboardType: TextInputType.number,
+                      decoration: const InputDecoration(labelText: 'Width'),
+                    ),
+                  ),
+                  const SizedBox(width: 16.0),
+                  Expanded(
+                    child: TextField(
+                      controller: _heightController,
+                      keyboardType: TextInputType.number,
+                      decoration: const InputDecoration(labelText: 'Height'),
+                    ),
+                  ),
+                  const SizedBox(width: 16.0),
+                  ElevatedButton(
+                    onPressed: _updateRatio,
+                    child: const Text('Update Ratio'),
+                  ),
+                ],
+              ),
+            ),
           SizedBox(height: MediaQuery.of(context).padding.bottom),
         ],
       ),
     );
   }
+
+  Widget getShapeIcon(CustomCropShape shape) {
+    switch (shape) {
+      case CustomCropShape.Circle:
+        return const Icon(Icons.circle_outlined);
+      case CustomCropShape.Square:
+        return const Icon(Icons.square_outlined);
+      case CustomCropShape.Ratio:
+        return const Icon(Icons.crop_16_9_outlined);
+    }
+  }
 }

lib/custom_image_crop.dart

@@ -5,3 +5,4 @@ export 'package:custom_image_crop/src/widgets/custom_image_crop_widget.dart';
 export 'package:custom_image_crop/src/painters/dotted_path_painter.dart';
 export 'package:custom_image_crop/src/painters/solid_path_painter.dart';
 export 'package:custom_image_crop/src/models/model.dart';
+export 'package:custom_image_crop/src/models/ratio.dart';

lib/src/models/ratio.dart

@@ -0,0 +1,6 @@
+class Ratio {
+  final double width;
+  final double height;
+
+  Ratio({required this.width, required this.height});
+}

lib/src/widgets/custom_image_crop_widget.dart

@@ -1,6 +1,7 @@
 import 'dart:async';
 import 'dart:ui' as ui;
 
+import 'package:custom_image_crop/src/models/ratio.dart';
 import 'package:flutter/material.dart';
 import 'package:gesture_x_detector/gesture_x_detector.dart';
 import 'package:vector_math/vector_math_64.dart' as vector_math;
@@ -29,9 +30,19 @@ class CustomImageCrop extends StatefulWidget {
   /// The color in front of the cropped area
   final Color overlayColor;
 
-  /// The shape of the cropping area
+  /// The shape of the cropping area.
+  /// Possible values:
+  /// - [CustomCropShape.Circle] Crop area will be circular.
+  /// - [CustomCropShape.Square] Crop area will be a square.
+  /// - [CustomCropShape.Ratio] Crop area will have a specified aspect ratio.
   final CustomCropShape shape;
 
+  /// Ratio of the cropping area.
+  /// If [shape] is set to [CustomCropShape.Ratio], this property is required.
+  /// For example, to create a square crop area, use [Ratio(width: 1, height: 1)].
+  /// To create a rectangular crop area with a 16:9 aspect ratio, use [Ratio(width: 16, height: 9)].
+  final Ratio? ratio;
+
   /// How to fit image inside visible space
   final CustomImageFit imageFit;
 
@@ -94,10 +105,15 @@ class CustomImageCrop extends StatefulWidget {
     this.canScale = true,
     this.canMove = true,
     this.customProgressIndicator,
+    this.ratio,
     Paint? imagePaintDuringCrop,
     Key? key,
   })  : this.imagePaintDuringCrop = imagePaintDuringCrop ??
             (Paint()..filterQuality = FilterQuality.high),
+        assert(
+          !(shape == CustomCropShape.Ratio && ratio == null),
+          "If shape is set to Ratio, ratio should not be null.",
+        ),
         super(key: key);
 
   @override
@@ -260,6 +276,15 @@ class _CustomImageCropState extends State<CustomImageCrop>
               radius: cropWidth / 2,
             ),
           );
+      case CustomCropShape.Ratio:
+        return Path()
+          ..addRect(
+            Rect.fromCenter(
+              center: Offset(width / 2, height / 2),
+              width: cropWidth,
+              height: cropWidth * widget.ratio!.height / widget.ratio!.width,
+            ),
+          );
       default:
         return Path()
           ..addRect(
@@ -352,6 +377,7 @@ class _CustomImageCropState extends State<CustomImageCrop>
 enum CustomCropShape {
   Circle,
   Square,
+  Ratio,
 }
 
 enum CustomImageFit {