image_cropping

This plugin supports cropping and rotating images for multiplatform. It Allow inclusion of background, Rotation of image, changing ratio of selection as per requirements.

Allow inclusion of background.

Rotation of image.

Change ratio of selection.

Installation

If you are targeting web, don't forget to add worker.js, worker.js.deps, worker.js.map in your project's root directory.

Example

ImageCropper.cropImage(
  context,
  imageBytes!,
  () {
    showLoader();
  },
  () {
    hideLoader();
  },
  (data) {
    setState(() {
      imageBytes = data;
    });
  },
  selectedImageRatio: ImageRatio.RATIO_1_1,
  visibleOtherAspectRatios: true,
  squareBorderWidth: 2,
  squareCircleColor: Colors.black,
  defaultTextColor: Colors.orange,
  selectedTextColor: Colors.black,
  colorForWhiteSpace: Colors.grey,
);

Required parameters

BuildContext:

Context is use to push new screen for image cropping.

_imageBytes:

Image bytes is use to draw image in device and if image not fits in device screen then we manage background color(if you have passed colorForWhiteSpace or else White background) in image cropping screen.

_onImageStartLoading:

This is a callback. you have to override and show dialog or etc when image cropping is in loading state.

_onImageEndLoading:

This is a callback. you have to override and hide dialog or etc when image cropping is ready to show result in cropping screen.

_onImageDoneListener:

This is a callback. you have to override and you will get Uint8List as result.

Optional parameters

ImageRatio:

This property contains ImageRatio value. You can set the initialized aspect ratio when starting the cropper by passing a value of ImageRatio. default value is ImageRatio.FREE

visibleOtherAspectRatios:

This property contains boolean value. If this properties is true then it shows all other aspect ratios in cropping screen. default value is true.

squareBorderWidth:

This property contains double value. You can change square border width by passing this value.

squareCircleColor:

This property contains Color value. You can change square circle color by passing this value.

defaultTextColor:

This property contains Color value. By passing this property you can set aspect ratios color which are unselected.

selectedTextColor:

This property contains Color value. By passing this property you can set aspect ratios color which is selected.

colorForWhiteSpace:

This property contains Color value. By passing this property you can set background color, if screen contains blank space.

Note:

For flutter web, copy worker.js from example folder to the project, else it will not work. The result returns in Uint8List. so it can be lost later, you are responsible for storing it somewhere permanent (if needed).

Guideline for contributors

Contribution towards our repository is always welcome, we request contributors to create a pull request to the develop branch only.

Guideline to report an issue/feature request

It would be great for us if the reporter can share the below things to understand the root cause of the issue.

• Library version
• Code snippet
• Logs if applicable
• Device specification like (Manufacturer, OS version, etc)
• Screenshot/video with steps to reproduce the issue

Library used

• Image

LICENSE!

Image Cropper is MIT-licensed.

Let us know!

We’d be really happy if you send us links to your projects where you use our component. Just send an email to [email protected] And do let us know if you have any questions or suggestion regarding our work.