fix: bug with the image crop

impaktfull · Oct 14, 2024 · 40c37b0 · 40c37b0
1 parent a429e17
commit 40c37b0
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 27 deletions.
diff --git a/example/lib/src/component_library/components/image_crop/image_crop_library_variant.dart b/example/lib/src/component_library/components/image_crop/image_crop_library_variant.dart
@@ -16,7 +16,8 @@ class ImageCropLibraryVariant
       BuildContext context, ImageCropLibraryPrimaryInputs inputs) {
     return [
       const ImpaktfullUiImageCrop(
-        size: 100,
+        size: 120,
+        backgroundColor: Colors.amber,
         imageUrl: NetworkImages.profilePicture,
       ),
       const ImpaktfullUiImageCrop(
@@ -25,6 +26,7 @@ class ImageCropLibraryVariant
       ),
       const ImpaktfullUiImageCrop(
         size: 300,
+        backgroundColor: Colors.amber,
         imageUrl: NetworkImages.image16x9,
       ),
     ];

diff --git a/lib/src/components/image_crop/controller/image_crop_controller.dart b/lib/src/components/image_crop/controller/image_crop_controller.dart
@@ -48,6 +48,14 @@ Future<ui.Image> isolateCropImage(Map<String, dynamic> params) async {
     scaledCropRect.bottom.clamp(0, imageHeight),
   );
 
+  // Add background color if not transparent
+  if (cropInfo.backgroundColor != const Color(0x00000000)) {
+    canvas.drawRect(
+      Rect.fromLTWH(0, 0, srcRect.width, srcRect.height),
+      Paint()..color = cropInfo.backgroundColor,
+    );
+  }
+
   canvas.save();
   // Translate the canvas to the center of the crop rectangle.
   // This sets the pivot point for subsequent transformations (rotation, scaling, etc.)

diff --git a/lib/src/components/image_crop/image_crop.dart b/lib/src/components/image_crop/image_crop.dart
@@ -25,12 +25,14 @@ class ImpaktfullUiImageCrop extends StatefulWidget
   final ImpaktfullUiImageCropController? controller;
   final String? imageUrl;
   final double size;
+  final Color backgroundColor;
   final ImpaktfullUiImageCropTheme? theme;
 
   const ImpaktfullUiImageCrop({
     required this.size,
     this.controller,
     this.imageUrl,
+    this.backgroundColor = const Color(0x00000000),
     this.theme,
     super.key,
   });
@@ -51,21 +53,23 @@ class _ImpaktfullUiImageCropState extends State<ImpaktfullUiImageCrop> {
   @override
   void initState() {
     super.initState();
-    final sizePercentage = widget.size / 4;
+    final padding = widget.size / 8;
+    final cropSize = widget.size - padding * 2;
     _cropInfo = CropInfo(
       cropRect: Rect.fromLTWH(
-        sizePercentage / 2,
-        sizePercentage / 2,
-        widget.size - sizePercentage,
-        widget.size - sizePercentage,
+        padding,
+        padding,
+        cropSize,
+        cropSize,
       ),
       width: widget.size,
       height: widget.size,
       rotation: 0,
-      scale: 1.0,
+      scale: 1,
       position: Offset.zero,
       isFlippedHorizontal: false,
       isFlippedVertical: false,
+      backgroundColor: widget.backgroundColor,
     );
     _controller = widget.controller ?? ImpaktfullUiImageCropController();
   }
@@ -91,7 +95,7 @@ class _ImpaktfullUiImageCropState extends State<ImpaktfullUiImageCrop> {
                 width: widget.size,
                 height: widget.size,
                 child: Container(
-                  color: Colors.black.withOpacity(0.33),
+                  color: widget.backgroundColor,
                   child: Stack(
                     alignment: Alignment.center,
                     children: [
@@ -145,28 +149,31 @@ class _ImpaktfullUiImageCropState extends State<ImpaktfullUiImageCrop> {
                     Positioned.fill(
                       child: GestureDetector(
                         onScaleUpdate: _onScaleUpdate,
-                        child: Transform(
-                          transform: Matrix4.identity()
-                            ..translate(
-                                _cropInfo.position.dx, _cropInfo.position.dy)
-                            ..scale(_cropInfo.scale)
-                            ..rotateZ(_cropInfo.rotation),
-                          alignment: Alignment.center,
+                        child: Material(
+                          color: Colors.transparent,
                           child: Transform(
                             transform: Matrix4.identity()
-                              ..scale(
-                                _cropInfo.isFlippedHorizontal ? -1.0 : 1.0,
-                                _cropInfo.isFlippedVertical ? -1.0 : 1.0,
-                              ),
+                              ..translate(
+                                  _cropInfo.position.dx, _cropInfo.position.dy)
+                              ..scale(_cropInfo.scale)
+                              ..rotateZ(_cropInfo.rotation),
                             alignment: Alignment.center,
-                            child: Builder(builder: (context) {
-                              if (widget.imageUrl != null) {
-                                return Image.network(
-                                  widget.imageUrl!,
-                                );
-                              }
-                              throw Exception('Image not found');
-                            }),
+                            child: Transform(
+                              transform: Matrix4.identity()
+                                ..scale(
+                                  _cropInfo.isFlippedHorizontal ? -1.0 : 1.0,
+                                  _cropInfo.isFlippedVertical ? -1.0 : 1.0,
+                                ),
+                              alignment: Alignment.center,
+                              child: Builder(builder: (context) {
+                                if (widget.imageUrl != null) {
+                                  return Image.network(
+                                    widget.imageUrl!,
+                                  );
+                                }
+                                throw Exception('Image not found');
+                              }),
+                            ),
                           ),
                         ),
                       ),

diff --git a/lib/src/components/image_crop/model/crop_info.dart b/lib/src/components/image_crop/model/crop_info.dart
@@ -9,6 +9,7 @@ class CropInfo {
   final Offset position;
   final bool isFlippedVertical;
   final bool isFlippedHorizontal;
+  final Color backgroundColor;
 
   const CropInfo({
     required this.cropRect,
@@ -19,6 +20,7 @@ class CropInfo {
     required this.position,
     required this.isFlippedVertical,
     required this.isFlippedHorizontal,
+    this.backgroundColor = const Color(0x00000000),
   });
 
   CropInfo copyWith({
@@ -30,6 +32,7 @@ class CropInfo {
     Offset? position,
     bool? isFlippedVertical,
     bool? isFlippedHorizontal,
+    Color? backgroundColor,
   }) {
     return CropInfo(
       cropRect: cropRect ?? this.cropRect,
@@ -40,6 +43,7 @@ class CropInfo {
       position: position ?? this.position,
       isFlippedVertical: isFlippedVertical ?? this.isFlippedVertical,
       isFlippedHorizontal: isFlippedHorizontal ?? this.isFlippedHorizontal,
+      backgroundColor: backgroundColor ?? this.backgroundColor,
     );
   }
 }