fixes [Feature Request] CustomPaint for drawPath #31

Author: Skandar Munir Ahmed

example/lib/main.dart

@@ -100,6 +100,12 @@ class _MyHomePageState extends State<MyHomePage> {
               canMove: false,
               canScale: false,
               customProgressIndicator: const CupertinoActivityIndicator(),
+              // use custom paint if needed
+              // pathPaint: Paint()
+              //   ..color = Colors.red
+              //   ..strokeWidth = 4.0
+              //   ..style = PaintingStyle.stroke
+              //   ..strokeJoin = StrokeJoin.round,
             ),
           ),
           Row(

lib/src/painters/dotted_path_painter.dart

@@ -2,22 +2,38 @@ import 'package:flutter/material.dart';
 
 /// Draw a dotted path around the given path
 class DottedCropPathPainter extends CustomPainter {
-  static const _dashWidth = 10.0;
-  static const _dashSpace = 5.0;
-  static const _strokeWidth = 4.0;
+  final double dashWidth;
+  final double dashSpace;
   final Path _path;
-  final _paint = Paint()
-    ..color = Colors.white
-    ..strokeWidth = _strokeWidth
-    ..style = PaintingStyle.stroke
-    ..strokeJoin = StrokeJoin.round;
+  final Paint pathPaint;
 
   /// Draw a dotted path around the given path
-  DottedCropPathPainter(this._path);
+  DottedCropPathPainter(
+    this._path, {
+    this.dashWidth = 10.0,
+    this.dashSpace = 5.0,
+    required this.pathPaint,
+  });
 
   /// Return a CustomPaint widget with the current CustomPainter
-  static CustomPaint drawPath(Path path) =>
-      CustomPaint(painter: DottedCropPathPainter(path));
+  static CustomPaint drawPath(Path path, {Paint? pathPaint}) {
+    if (pathPaint != null) {
+      return CustomPaint(
+        painter: DottedCropPathPainter(path, pathPaint: pathPaint),
+      );
+    } else {
+      return CustomPaint(
+        painter: DottedCropPathPainter(
+          path,
+          pathPaint: Paint()
+            ..color = Colors.white
+            ..strokeWidth = 4.0
+            ..style = PaintingStyle.stroke
+            ..strokeJoin = StrokeJoin.round,
+        ),
+      );
+    }
+  }
 
   @override
   void paint(Canvas canvas, Size size) {
@@ -26,14 +42,14 @@ class DottedCropPathPainter extends CustomPainter {
     for (final pathMetric in _path.computeMetrics()) {
       while (distance < pathMetric.length) {
         dashPath.addPath(
-          pathMetric.extractPath(distance, distance + _dashWidth),
+          pathMetric.extractPath(distance, distance + dashWidth),
           Offset.zero,
         );
-        distance += _dashWidth;
-        distance += _dashSpace;
+        distance += dashWidth;
+        distance += dashSpace;
       }
     }
-    canvas.drawPath(dashPath, _paint);
+    canvas.drawPath(dashPath, pathPaint);
   }
 
   @override

lib/src/widgets/custom_image_crop_widget.dart

@@ -53,7 +53,19 @@ class CustomImageCrop extends StatefulWidget {
   /// The path drawer of the border see [DottedCropPathPainter],
   /// [SolidPathPainter] for more details or how to implement a
   /// custom one
-  final CustomPaint Function(Path) drawPath;
+  final CustomPaint Function(Path, {Paint? pathPaint}) drawPath;
+
+  /// Custom paint options for drawing the cropping border.
+  ///
+  /// If [paint] is provided, it will be used for customizing the appearance
+  /// of the cropping border.
+  ///
+  /// If [paint] is not provided, default values will be used:
+  /// - Color: [Colors.white]
+  /// - Stle [PaintingStyle.stroke]
+  /// - Stroke Join [StrokeJoin.round]
+  /// - Stroke Width: 4.0
+  final Paint? pathPaint;
 
   /// Whether to allow the image to be rotated.
   final bool canRotate;
@@ -101,6 +113,7 @@ class CustomImageCrop extends StatefulWidget {
     this.imageFit = CustomImageFit.fitCropSpace,
     this.cropPercentage = 0.8,
     this.drawPath = DottedCropPathPainter.drawPath,
+    this.pathPaint,
     this.canRotate = true,
     this.canScale = true,
     this.canMove = true,
@@ -222,7 +235,7 @@ class _CustomImageCropState extends State<CustomImageCrop>
                     ),
                   ),
                 ),
-                widget.drawPath(_path),
+                widget.drawPath(_path, pathPaint: widget.pathPaint),
               ],
             ),
           ),