native_image_cropper 0.6.0

A Flutter plugin for cropping images. Supports rectangular and circular cropping.

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