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.
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 #
- Add UCropActivity into your AndroidManifest.xml
<activity android:name="com.yalantis.ucrop.UCropActivity" android:screenOrientation="portrait" android:theme="@style/Theme.AppCompat.Light.NoActionBar"/>
- No configuration required
Required paramsters #
- 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
cropStyle: controls the style of crop bounds, it can be rectangle or circle style (default is
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.
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).
Image Cropper provides a helper class called
AndroidUiSettings that wraps all properties can be used to customize UI in uCrop library.
|desired text for Toolbar title||String|
|desired color of the Toolbar||Color|
|desired color of status||Color|
|desired color of Toolbar text and buttons (default is darker orange)||Color|
|desired background color that should be applied to the root view||Color|
|desired color of the active and selected widget (default is white)||Color|
|desired color of the progress wheel middle line (default is violet)||Color|
|desired color of dimmed area around the crop bounds||Color|
|desired color of crop frame||Color|
|desired color of crop grid/guidelines||Color|
|desired width of crop frame line in pixels||int|
|crop grid rows count||int|
|crop grid columns count||int|
|desired width of crop grid lines in pixels||int|
|set to true if you want to see a crop grid/guidelines on top of an image||bool|
|set to true if you want to lock the aspect ratio of crop bounds with a fixed value (locked by default)||bool|
|set to true to hide the bottom controls (shown by default)||bool|
|desired aspect ratio is applied (from the list of given aspect ratio presets) when starting the cropper||CropAspectRatioPreset|
Image Cropper provides a helper class called
IOUiSettings that wraps all properties can be used to customize UI in TOCropViewController library.
|The minimum croping aspect ratio. If set, user is prevented from setting cropping rectangle to lower aspect ratio than defined by the parameter||double|
|If true, when the user hits 'Done', a ||bool|
|Shows a confirmation dialog when the user hits 'Cancel' and there are pending changes (default is false)||bool|
|When disabled, an additional rotation button that rotates the canvas in 90-degree segments in a clockwise direction is shown in the toolbar (default is false)||bool|
|If this controller is embedded in ||bool|
|When enabled, hides the rotation button, as well as the alternative rotation button visible when ||bool|
|When enabled, hides the 'Reset' button on the toolbar (default is false)||bool|
|When enabled, hides the 'Aspect Ratio Picker' button on the toolbar (default is false)||bool|
|If true, tapping the reset button will also reset the aspect ratio back to the image default ratio. Otherwise, the reset will just zoom out to the current aspect ratio. If this is set to false, and ||bool|
|If true, a custom aspect ratio is set, and the ||bool|
|If true, while it can still be resized, the crop box will be locked to its current aspect ratio. If this is set to true, and ||bool|
|Title for the 'Done' button. Setting this will override the Default which is a localized string for "Done"||String|
|Title for the 'Cancel' button. Setting this will override the Default which is a localized string for "Cancel"||String|
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, ) );
[1.2.0] - 2020-01-19
- Android: migrate to embedding v2
[1.1.2] - 2019-12-18
- Android: fix bug crashing on Flutter v1.12.13
[1.1.1] - 2019-11-30
- Android: upgrade gradle version
- iOS: remove
static_frameworkPod configuration, upgrade
[1.1.0] - 2019-09-29
- BIG UPDATES: supports UI customization on both of Android and iOS, supports more image compress format and quality.
- BREAKING CHANGE:
ratioYare replaced by
circleShapeis replaced by
toolbarColor(these properties are moved into
- iOS: upgrade native library (TOCropViewController v2.5.1)
- Android: upgrade native library (uCrop v2.2.4)
[1.0.2] - 2019-05-25
- iOS: upgrade native library
- Android: fix bug #40
[1.0.1] - 2019-04-15
- Android: migrate to AndroidX
- upgrade native libraries
[1.0.0] - 2019-02-09
- Android: remove deprecated support libraries
- Android: target version to 28
[0.0.9] - 2018-11-14
- clarify code document
[0.0.8] - 2018-10-12
- set default value for
[0.0.7] - 2018-10-10
- support circular cropping
[0.0.6] - 2018-08-29
TOCropViewControllerdependency to v2.3.8
[0.0.5] - 2018-08-10
- re-config to support Dart2
- fix bug: lock aspect ratio
[0.0.4] - 2018-07-06
- refactor: change
[0.0.3] - 2018-07-05
- fix bug: increasing image size after cropping
- add new feature:
toolbarColorto customize title and color of copper
[0.0.2] - 2018-06-28
- clarify document
[0.0.1] - 2018-06-27
- initial release.
Demonstrates how to use the image_cropper plugin.
Getting Started #
For help getting started with Flutter, view our online documentation.
Use this package as a library
1. Depend on it
Add this to your package's pubspec.yaml file:
dependencies: image_cropper: ^1.2.0
2. Install it
You can install packages from the command line:
$ flutter pub get
Alternatively, your editor might support
flutter pub get.
Check the docs for your editor to learn more.
3. Import it
Now in your Dart code, you can use:
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
We analyzed this package on Jan 21, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:
- Dart: 2.7.0
- pana: 0.13.4
- Flutter: 1.12.13+hotfix.5