feat(crop-rotate-editor): add helperLineWidth to customize grid line thickness

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## 12.0.3
+- **FEAT**(crop-rotate-editor): Add `helperLineWidth` to `CropRotateEditorStyle`, allowing the grid line thickness to be customized or hidden entirely by setting it to `0`.
+
 ## 12.0.2
 - **FIX**(main-editor): Resolve crash when `setState` is called after widget disposal, preventing "Cannot add new events after calling close" error.
 

lib/core/models/styles/crop_rotate_editor_style.dart

@@ -56,6 +56,7 @@ class CropRotateEditorStyle {
     this.appBarBackground = kImageEditorAppBarBackground,
     this.appBarColor = kImageEditorAppBarColor,
     this.helperLineColor = const Color(0xFF000000),
+    this.helperLineWidth = 0.5,
     this.background = kImageEditorBackground,
     this.cropCornerColor = kImageEditorPrimaryColor,
     this.cropOverlayColor = const Color(0xFF000000),
@@ -109,6 +110,12 @@ class CropRotateEditorStyle {
   /// Color from the helper lines when moving the image.
   final Color helperLineColor;
 
+  /// The width (thickness) of the helper lines drawn inside the crop area.
+  ///
+  /// Set to `0` to hide the helper lines entirely.
+  /// Defaults to `0.5`.
+  final double helperLineWidth;
+
   /// This refers to the overlay area atop the image when the cropping area is
   /// smaller than the image.
   ///
@@ -158,6 +165,7 @@ class CropRotateEditorStyle {
     Color? background,
     Color? cropCornerColor,
     Color? helperLineColor,
+    double? helperLineWidth,
     Color? cropOverlayColor,
     double? cropCornerLength,
     double? cropCornerThickness,
@@ -179,6 +187,7 @@ class CropRotateEditorStyle {
       background: background ?? this.background,
       cropCornerColor: cropCornerColor ?? this.cropCornerColor,
       helperLineColor: helperLineColor ?? this.helperLineColor,
+      helperLineWidth: helperLineWidth ?? this.helperLineWidth,
       cropOverlayColor: cropOverlayColor ?? this.cropOverlayColor,
       cropCornerLength: cropCornerLength ?? this.cropCornerLength,
       cropCornerThickness: cropCornerThickness ?? this.cropCornerThickness,

lib/features/crop_rotate_editor/widgets/crop_corner_painter.dart

@@ -98,12 +98,6 @@ class CropCornerPainter extends CustomPainter {
   /// such as highlighting or accentuating elements during user actions.
   final double interactionOpacity;
 
-  /// The width of the helper lines.
-  ///
-  /// This double value specifies the thickness of auxiliary lines drawn to
-  /// assist with cropping, providing additional visual guides.
-  double helperLineWidth = 0.5;
-
   /// The scale factor for resizing elements.
   ///
   /// This double value determines how much the elements are scaled, allowing
@@ -347,6 +341,9 @@ class CropCornerPainter extends CustomPainter {
   }
 
   void _drawHelperAreas({required Canvas canvas, required Size size}) {
+    final lineWidth = style.helperLineWidth;
+    if (lineWidth <= 0) return;
+
     Path path = Path();
 
     double cropWidth = _cropOffsetRight - _cropOffsetLeft;
@@ -356,39 +353,39 @@ class CropCornerPainter extends CustomPainter {
     double cropAreaSpaceH = cropHeight / 3;
 
     /// Calculation is important for the round-cropper
-    double lineWidth = !drawCircle
+    double drawWidth = !drawCircle
         ? cropWidth
         : sqrt(pow(cropWidth, 2) - pow(cropAreaSpaceW, 2));
-    double lineHeight = !drawCircle
+    double drawHeight = !drawCircle
         ? cropHeight
         : sqrt(pow(cropHeight, 2) - pow(cropAreaSpaceH, 2));
 
-    double gapW = (cropWidth - lineWidth) / 2;
-    double gapH = (cropHeight - lineHeight) / 2;
+    double gapW = (cropWidth - drawWidth) / 2;
+    double gapH = (cropHeight - drawHeight) / 2;
 
     for (var i = 1; i < 3; i++) {
       path
         ..addRect(
           Rect.fromLTWH(
             cropAreaSpaceW * i + _cropOffsetLeft,
             gapH + _cropOffsetTop,
-            helperLineWidth,
-            lineHeight,
+            lineWidth,
+            drawHeight,
           ),
         )
         ..addRect(
           Rect.fromLTWH(
             gapW + _cropOffsetLeft,
             cropAreaSpaceH * i + _cropOffsetTop,
+            drawWidth,
             lineWidth,
-            helperLineWidth,
           ),
         );
     }
 
     final cornerPaint = Paint()
       ..color = style.helperLineColor.withValues(
-        alpha: fadeInOpacity * interactionOpacity,
+        alpha: style.helperLineColor.a * fadeInOpacity * interactionOpacity,
       )
       ..style = PaintingStyle.fill;
     canvas.drawPath(path, cornerPaint);

pubspec.yaml

@@ -1,6 +1,6 @@
 name: pro_image_editor
 description: "A Flutter image editor: Seamlessly enhance your images with user-friendly editing features."
-version: 12.0.2
+version: 12.0.3
 homepage: https://github.com/hm21/pro_image_editor/
 repository: https://github.com/hm21/pro_image_editor/
 documentation: https://github.com/hm21/pro_image_editor/