Hi. I'm Tsuyoshi Chujo developing mobile apps with Flutter.

This is my first article on hashnode, and I'd like to introduce my brand-new Flutter package, named crop_your_image.

What is crop_your_image?

crop_your_image is a Flutter package which helps Flutter app developers to embed cropping images functionality to their apps.

Comparing to other packages which provide the same functionality, crop_your_image has flexibility so that each app developers can embed this functionality into whatever UI they designed.

If you wish to see some examples before reading this article, a repository of the sample app below is available and you can find several UIs for cropping images using crop_your_image.

github.com/chooyan-eng/crop_your_image_gall..

How to Use crop_your_image?

Now, let's take a closer look at crop_your_image package.

Crop widget

First of all, crop_your_image provides Crop. As Crop is just a Flutter widget, you can place Crop at anywhere you want in your widget tree.

The code below shows Crop is placed at the very center of users' screen.

@override
Widget build(BuildContext context) {
  return SizedBox(
    width: double.infinity,
    height: double.infinity,
    child: Center(
      child: Crop(
        image: _imageData,
        onCropped: (croppedData) { },
      ),
    ),
  );
}

As you can see in the screenshot above, Crop displays the cropping editor containing a image of given _imageData and the cropping area, which can be resized and moved by users.

CropController

You would notice that there is no button to execute cropping images. Because the goal of crop_your_image is flexibility, it does NOT provide any UI parts other than the cropping editor.

While crop_your_image doesn't provide "Crop" button, you can place any buttons, icons or whatever widget and execute cropping by using CropController.

For example, the code below shows placing "CROP IT!" button below Crop widget which executes cropping by tapping.

return SizedBox(
  width: double.infinity,
  height: double.infinity,
  child: Column(
    children: [
      Expanded(
        child: Crop(
          image: _imageDataList[0],
          onCropped: (croppedData) {},
          controller: _cropController,
        ),
      ),
      Padding(
        padding: const EdgeInsets.all(16),
        child: ElevatedButton(
          onPressed: () { _cropController.crop(); },
          child: Text('CROP IT!'),
        ),
      ),
    ],
  ),
);

Note that _cropController in the code above is instantiated at somewhere (e.g. at the field of State of StatefulWidget) and passed to controller property of Crop .

As you can see, you can simply call crop() method of _cropController from anywhere you want for starting cropping.

Receiving Cropped Data

When _cropController.crop() is called, Crop widget starts creating cropped data of given image with current cropping area.

Once the process is done, onCropped callback of Crop is called and you will receive croppedData as an argument of the callback. After that, it's up to your apps what to do with croppedData, e.g. showing it with Image.memory widget, save it in user's storage, pass it to Crop again and continue cropping, etc.

---

That's it!

I hope the basic idea and usage of crop_your_image is now clear. You can place Crop widget at anywhere and control it with CropController.

crop_your_image off course provides more features such as

• fix aspect ratio of cropping area
• crop with circle
• set rect of cropping area programmatically
• configure color of the cropping mask
• change widget of the dots placed at the corner of cropping area
• all platforms support
• null safety support
• etc.

It's completely UP TO YOU how to provide these features with your own designed UI.

If you are interested in what you can do with crop_your_image, just visit pub.dev below and all the APIs are explained in Readme.

pub.dev/packages/crop_your_image

Or if you have some questions, feedbacks or other features you want, I'm always waiting at the issues page of GitHub repository below.

github.com/chooyan-eng/crop_your_image/issues

Thank you for reading this article and I'll be happy if you are interested in this package and add a single line below in your pubspec.yaml file.

crop_your_image: ^0.5.1+1