Crop images with your own designed UI using "crop_your_image" Flutter package
Tags: flutter, package, privateproject
Published: 2021-03-16 13:00:54

---
title: Crop images with your own designed UI using "crop_your_image" Flutter package
published: true
description: crop_your_image enables you to build functionality to crop images with your own designed Widgets. 
tags: Flutter, package, privateproject
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/plij2vx6r07y3yr7nu68.png
---

When you are thinking of building functionality to crop images in your Flutter app, you would search [pub.dev](https://pub.dev/) and find several Flutter packages, such as [image_crop](https://pub.dev/packages/image_crop), [image_cropper](https://pub.dev/packages/image_cropper), etc. 

In this article, I would like to give you one more choice here, 
[crop_your_image](https://pub.dev/packages/crop_your_image) which is developed by [ME](https://github.com/chooyan-eng).

# What is crop_your_image

[crop_your_image](https://pub.dev/packages/crop_your_image) is a Flutter package which enables you app developers to embed functionality of cropping images in your apps: typically needed in "Edit Profile Image" pages or "Upload Image" pages, etc.

Though I know we already have some nice package to build such pages, I believe one more package with different approach would help someone who are not satisfied in existing packages.

![crop_your_image demo](https://github.com/chooyan-eng/crop_your_image/blob/main/assets/cropyourimage.gif)

# crop_your_image's Approach

The biggest policy of crop_your_image package is _provide controller, not UI_.

As far as I have researched, most image cropping package provides both cropping feature and UI to determine the area of cropping images.

Yeah, it would be quite helpful as app developers can embed image cropping functionality into their apps with only writing a couple of lines of codes.

On the other hand, however, I also believe that some need to build such functionality _with their own UI designed with their own brand image_.

Considering that kind of use-cases, providing fixed UI, even though the UI can be customized by passing parameters to change color, text, size, etc., prevent app developers from keep consistency of UI design.

crop_your_image's approach is to provide `Crop` widget which is controlled by using `CropController` and DON'T provides Widgets to manage this controller. For example, you can just call `CropController.crop` method from your own Widget to execute cropping images with rect that user selected.

# Sample program

Here is some sample programs.

What app developers have to do is simply place `Crop` widget at wherever on the widget tree they want to place.

```dart
@override
Widget build(BuildContext context) {
  return Container(
    width: double.infinity,
    height: double.infinity,
    child: Crop(
      image: _originalImage,
      onCropped: (croppedImage) {
        // do whatever you want with cropped image
      },
    ),
  );
}
```
`image` property is an original image data with type of `Uint8List`, which can be from image file in assets folder or from network possibly depending on each apps' implementation.

`Crop` widget will display the given image and interactively resizable cropping area on users' screen.

Once image is cropped, `onCropped` callback is called with cropped image data with type of `Uint8List` also.

But how to execute cropping? `CropController` is available here.

```dart
@override
Widget build(BuildContext context) {
  final controller = CropController();
  return Container(
    width: double.infinity,
    height: double.infinity,
    child: Crop(
      image: _originalImage,
      onCropped: (croppedImage) {
        // do whatever you want with cropped image
      },
      controller: controller,
    ),
  );
}
```

`CropController` has several methods such as `crop()` to execute cropping the image with currently selected area, or `cropCircle()` if you want images cropped with circle shape. 

What app developer do is just call the methods at anywhere like `onPressed` callback of `ElevatedButton` like below.

```dart
ElevatedButton(
  child: Text('Crop it!'),
  onPressed: () => controller.crop(),
),
```

As `ElevatedButton` is a widget provided by flutter framework and can be designed whatever you like, app developers can embed `Crop` widget of crop_your_image without breaking the consistency of your own design.

# Other Features

crop_your_image has more features such as fixing aspect ratio, cropping with circle shape, etc. and the details are explained on README.md of the package.

Because crop_your_image is just started developing a couple of days ago, new features can be added day by day.

If you are interested in the package and need features that are not implemented yet, I'm looking forward to receive issues or comments on [GitHub](https://github.com/chooyan-eng/crop_your_image).

# Summary

crop_your_image is a brand-new (meaning still alpha) Flutter package that provides "cropping images" functionality to your apps.

Comparing to existing packages, crop_your_image provides minimum UI so that app developers can embed `Crop` widget keeping consistency of UI design.

crop_your_image also available on multi-platforms because it does NOT use native code (Swift / Kotlin) via PlatformChannel and depend only on [image](https://pub.dev/packages/image) package which is 100% built with Dart.

I'll be very happy if you try crop_your_image and give me any feedback. Thanks.

---

Thank you for reading my introduction to crop_your_image Flutter package.

As I'm not a native speaker of English, some expression would be strange and give you confusion, I guess. If you have anything unclear, just leave comments below and I’m glad to discuss.