native_image_cropper

Description:

native image cropper

native_image_cropper #




A Flutter plugin which supports native circular and rectangular cropping.

Features #

Better performance, since it is written in Kotlin/Swift
Usable without widget
Circular and rectangular cropping
Customizable drag points
Customizable crop mask
Customizable hit size

Usage #
Depend on it:
dependencies:
native_image_cropper: ^0.4.0
copied to clipboard
Import it:
import 'package:native_image_cropper/native_image_cropper.dart';
copied to clipboard
Minimal example: #
Scaffold(
body: CropPreview(
bytes: imageData,
),
);
copied to clipboard
Customization options: #
final maskOptions = const MaskOptions(
backgroundColor: Colors.black38,
borderColor: Colors.grey,
strokeWidth: 2,
aspectRatio: 4 / 3,
minSize: 0,
);

CropPreview(
mode: CropMode.rect,
dragPointSize: 20,
hitSize: 20,
maskOptions: maskOptions,
dragPointBuilder: (size, position) {
if (position == CropDragPointPosition.topLeft) {
return CropDragPoint(size: size, color: Colors.red);
}
return CropDragPoint(size: size, color: Colors.blue);
},
);
copied to clipboard
Crop an image: #
To crop an image you can pass a CropController to CropPreview:
final controller = CropController();

CropPreview(controller: controller, bytes: imageData);

final cropSize = controller.cropSize;
final croppedBytes = await controller.crop();
copied to clipboard
or call it directly using MethodChannels:
final croppedBytes = await NativeImageCropper.cropRect(
bytes: imageData,
x: 0,
y: 0,
width: 500,
height: 500,
);
copied to clipboard
final croppedBytes = await NativeImageCropper.cropOval(
bytes: imageData,
x: 0,
y: 0,
width: 500,
height: 500,
);
copied to clipboard
Limitations on the web platform #
The Flutter engine Skia does not support JPEG. Therefore, our package currently only supports
cropping to PNG format. On the web platform, isolates are not supported for
concurrency, which means that the UI may freeze for large images.
However, we plan to implement a solution for JPEG support in the future, and we will also look into
utilizing web workers to run scripts in background threads, similar to isolates.
Also it is not possible render the crop mask properly due to an issue on the web platform.
To disable the crop mask you have to set the background color of the mask to transparent.
final maskOptions = const MaskOptions(backgroundColor: Colors.transparent);
copied to clipboard