Image Cropper

A Flutter plugin for Android and iOS supports cropping images. This plugin is based on two different native libraries so it comes with different UI between these platforms.

Introduction

Image Cropper doesn’t manipulate images in Dart codes directly, instead, the plugin uses Platform Channel to expose Dart APIs that Flutter application can use to communicate with two very powerful native libraries (uCrop and TOCropViewController) to crop and rotate images. Because of that, all credits belong to these libraries.

uCrop – Yalantis

This project aims to provide an ultimate and flexible image cropping experience. Made in Made in Yalantis

TOCropViewController – TimOliver

TOCropViewController is an open-source UIViewController subclass to crop out sections of UIImage objects, as well as perform basic rotations. It is excellent for things like editing profile pictures, or sharing parts of a photo online. It has been designed with the iOS Photos app editor in mind, and as such, behaves in a way that should already feel familiar to users of iOS.

How to install

Android

• Add UCropActivity into your AndroidManifest.xml

<activity
    android:name="com.yalantis.ucrop.UCropActivity"
    android:screenOrientation="portrait"
    android:theme="@style/Theme.AppCompat.Light.NoActionBar"/>

Note:

From v1.2.0, you need to migrate your android project to v2 embedding (detail)

iOS

• No configuration required

Usage

Required parameters

• sourcePath: the absolute path of an image file.

Optional parameters

• maxWidth: maximum cropped image width.
• maxHeight: maximum cropped image height.
• aspectRatio: controls the aspect ratio of crop bounds. If this values is set, the cropper is locked and user can’t change the aspect ratio of crop bounds.
• aspectRatioPresets: controls the list of aspect ratios in the crop menu view. In Android, you can set the initialized aspect ratio when starting the cropper by setting the value of AndroidUiSettings.initAspectRatio.
• cropStyle: controls the style of crop bounds, it can be rectangle or circle style (default is CropStyle.rectangle).
• compressFormat: the format of result image, png or jpg (default is ImageCompressFormat.jpg).
• compressQuality: the value [0 – 100] to control the quality of image compression.
• androidUiSettings: controls UI customization on Android. See Android customization.
• iosUiSettings: controls UI customization on iOS. See iOS customization.

Note

The result file is saved in NSTemporaryDirectory on iOS and application Cache directory on Android, so it can be lost later, you are responsible for storing it somewhere permanent (if needed).

Customization

Android

Image Cropper provides a helper class called AndroidUiSettings that wraps all properties can be used to customize UI in uCrop library.

iOS

Image Cropper provides a helper class called IOUiSettings that wraps all properties can be used to customize UI in TOCropViewController library.

Example

import 'package:image_cropper/image_cropper.dart';

File croppedFile = await ImageCropper.cropImage(
      sourcePath: imageFile.path,
      aspectRatioPresets: [
        CropAspectRatioPreset.square,
        CropAspectRatioPreset.ratio3x2,
        CropAspectRatioPreset.original,
        CropAspectRatioPreset.ratio4x3,
        CropAspectRatioPreset.ratio16x9
      ],
      androidUiSettings: AndroidUiSettings(
          toolbarTitle: 'Cropper',
          toolbarColor: Colors.deepOrange,
          toolbarWidgetColor: Colors.white,
          initAspectRatio: CropAspectRatioPreset.original,
          lockAspectRatio: false),
      iosUiSettings: IOSUiSettings(
        minimumAspectRatio: 1.0,
      )
    );
    

Credits

• Android: uCrop created by Yalantis
• iOS: TOCropViewController created by Tim Oliver