Merge pull request #32 from sikandernoori/main

Implements [Feature Request] CustomPaint for drawPath #31

Author: ikbendewilliam

README.md

@@ -50,6 +50,9 @@ How big the crop should be in regards to the width and height available to the c
 
 How the border of the crop should be painted. default DottedCropPathPainter.drawPath and SolidCropPathPainter.drawPath are provided, but you can create/provide any CustomPaint.
 
+### pathPaint
+Custom painting for the crop area border style.
+
 ### canRotate
 
 Whether to allow the image to be rotated.

example/lib/main.dart

@@ -90,29 +90,53 @@ class _MyHomePageState extends State<MyHomePage> {
             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'),
+              image: const NetworkImage(
+                  'https://upload.wikimedia.org/wikipedia/en/7/7d/Lenna_%28test_image%29.png'),
               shape: _currentShape,
-              ratio: _currentShape == CustomCropShape.Ratio ? Ratio(width: _width, height: _height) : null,
+              ratio: _currentShape == CustomCropShape.Ratio
+                  ? Ratio(width: _width, height: _height)
+                  : null,
               canRotate: true,
               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(
             mainAxisAlignment: MainAxisAlignment.spaceAround,
             children: [
-              IconButton(icon: const Icon(Icons.refresh), onPressed: controller.reset),
-              IconButton(icon: const Icon(Icons.zoom_in), onPressed: () => controller.addTransition(CropImageData(scale: 1.33))),
-              IconButton(icon: const Icon(Icons.zoom_out), onPressed: () => controller.addTransition(CropImageData(scale: 0.75))),
-              IconButton(icon: const Icon(Icons.rotate_left), onPressed: () => controller.addTransition(CropImageData(angle: -pi / 4))),
-              IconButton(icon: const Icon(Icons.rotate_right), onPressed: () => controller.addTransition(CropImageData(angle: pi / 4))),
+              IconButton(
+                  icon: const Icon(Icons.refresh), onPressed: controller.reset),
+              IconButton(
+                  icon: const Icon(Icons.zoom_in),
+                  onPressed: () =>
+                      controller.addTransition(CropImageData(scale: 1.33))),
+              IconButton(
+                  icon: const Icon(Icons.zoom_out),
+                  onPressed: () =>
+                      controller.addTransition(CropImageData(scale: 0.75))),
+              IconButton(
+                  icon: const Icon(Icons.rotate_left),
+                  onPressed: () =>
+                      controller.addTransition(CropImageData(angle: -pi / 4))),
+              IconButton(
+                  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)));
+                    Navigator.of(context).push(MaterialPageRoute(
+                        builder: (BuildContext context) =>
+                            ResultScreen(image: image)));
                   }
                 },
               ),

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),
               ],
             ),
           ),