image_crop 0.3.2

  • Readme
  • Changelog
  • Example
  • Installing
  • 97

Image Cropping plugin for Flutter #

A flutter plugin to crop image on iOS and Android.

Image Cropping Active Image Cropping Idle

The plugin comes with a Crop widget. The widget renders only image, overlay, and handles to crop an image. Thus it can be composed with other widgets to build custom image cropping experience.

The plugin is working with files to avoid passing large amount of data through method channels. Files are stored in cache folders of iOS and Android. Thus if there is a need to save actual croped image, ensure to copy the file to other location.

All of the computation intensive work is done off a main thread via dispatch queues on iOS and cache thread pool on Android.

Note: This plugin is still under development, some features are not available yet and testing has been limited.

Installation #

Add image_crop image_crop as a dependency in pubspec.yaml.

Using #

Create a widget to load and edit an image:

final cropKey = GlobalKey<CropState>();

Widget _buildCropImage() {
  return Container(
      padding: const EdgeInsets.all(20.0),
      child: Crop(
        key: cropKey,
        image: Image.file(imageFile),
        aspectRatio: 4.0 / 3.0,

Access cropping values:

  • scale is a factor to proportionally scale image's width and height when cropped. 1.0 is no scale needed.
  • area is a rectangle indicating fractional positions on the image to crop from.
final crop = cropKey.currentState;
// or
// final crop = Crop.of(context);
final scale = crop.scale;
final area = crop.area;

if (area == null) {
    // cannot crop, widget is not setup
    // ...

Accessing and workign with images. As a convenience function to request permissions to access photos.

final permissionsGranted = await ImageCrop.requestPermissions();

Read image options, such as: width and height. This is efficent implementation that does not decode nor load actual image into a memory.

final options = await getImageOptions(file: file);
debugPrint('image width: ${options.width}, height: ${options.height}');

If image is large to be loaded into the memory, there is a sampling function that relies on a native platform to proportionally scale down the image befor loading it to the memory. e.g. resample image to get down to 1024x4096 dimension as close as possible. If it is a square preferredSize can be used to specify both width and height. Prefer to leverage this functionality when displaying images in UI.

final sampleFile = await ImageCrop.sampleImage(
    file: originalFile,
    preferredWidth: 1024,
    preferredHeight: 4096,

Once Crop widget is ready, there is a native support of croping and scaling an image. In order to produce higher quality cropped image, rely on sampling image with preferred maximum width and height. Scale up a resolution of the sampled image. When cropped, the image is in higher resolution. Example is illustrated below:

final sampledFile = await ImageCrop.sampleImage(
    file: originalFile,
    preferredWidth: (1024 / crop.scale).round(),
    preferredHeight: (4096 / crop.scale).round(),

final croppedFile = await ImageCrop.cropImage(
    file: sampledFile,
    area: crop.area,

0.3.2 #

  • Fixes #33. Image rotation bug after cropping on iOS
  • Flutter upgrade v1.13.5

0.3.1 #

  • Fixes #19. Painting of the image is independent of top/left handles
  • Visual correction of a grid. It was tilted by 1 point

0.3.0 #

  • Android gradle upgrade to 3.4.1. Gradle 5.1.1
  • Flutter upgrade 1.6.6
  • Android target SDK 28

0.2.1 #

  • Read exif information to provide proper width/height according to the orientation
  • Rotate image prior cropping as needed per exif information

0.2.0 #

  • Fit sampled images to specified maximum width/height on both iOS and Android
  • Preserve exif information on Android when crop/sample image
  • Updated example to illustrate higher quality cropped image production

0.1.3 #

  • New widget options: Maximum scale, always show grid
  • Adjusted scale to reflect original image size. If image scaled and fits in cropped area, scale is 1x
  • Calculate sample size against large side of image to match smaller to preferred width/height
  • Bug: ensure to display image on first frame
  • Optimization: do not resample if image is smaller than preferred width/height

0.1.2 #

  • Limit image to a crop area instead of view boundaries
  • Don't adjust a size during scale to avoid misalignment
  • After editing snap image back to a crop area. Auto scale if needed

0.1.1 #

  • Fixed an exception when aspect ratio is not supplied
  • Updated README with more information and screenshots

0.1.0 #

  • Tools to resample by a factor, crop, and get options of images
  • Display image provider
  • Scale and crop image via widget
  • Optional aspect ratio of crop area


import 'dart:io';
import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:image_crop/image_crop.dart';
import 'package:image_picker/image_picker.dart';

void main() {
    statusBarColor: Colors.transparent,
    statusBarBrightness: Brightness.dark,
    statusBarIconBrightness: Brightness.light,
    systemNavigationBarIconBrightness: Brightness.light,

  runApp(new MyApp());

class MyApp extends StatefulWidget {
  _MyAppState createState() => new _MyAppState();

class _MyAppState extends State<MyApp> {
  final cropKey = GlobalKey<CropState>();
  File _file;
  File _sample;
  File _lastCropped;

  void dispose() {

  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SafeArea(
        child: Container(
          padding: const EdgeInsets.symmetric(vertical: 40.0, horizontal: 20.0),
          child: _sample == null ? _buildOpeningImage() : _buildCroppingImage(),

  Widget _buildOpeningImage() {
    return Center(child: _buildOpenImage());

  Widget _buildCroppingImage() {
    return Column(
      children: <Widget>[
          child: Crop.file(_sample, key: cropKey),
          padding: const EdgeInsets.only(top: 20.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
                child: Text(
                  'Crop Image',
                  style: Theme.of(context)
                      .copyWith(color: Colors.white),
                onPressed: () => _cropImage(),

  Widget _buildOpenImage() {
    return FlatButton(
      child: Text(
        'Open Image',
        style: Theme.of(context).textTheme.button.copyWith(color: Colors.white),
      onPressed: () => _openImage(),

  Future<void> _openImage() async {
    final file = await ImagePicker.pickImage(source:;
    final sample = await ImageCrop.sampleImage(
      file: file,
      preferredSize: context.size.longestSide.ceil(),


    setState(() {
      _sample = sample;
      _file = file;

  Future<void> _cropImage() async {
    final scale = cropKey.currentState.scale;
    final area = cropKey.currentState.area;
    if (area == null) {
      // cannot crop, widget is not setup

    // scale up to use maximum possible number of pixels
    // this will sample image in higher resolution to make cropped image larger
    final sample = await ImageCrop.sampleImage(
      file: _file,
      preferredSize: (2000 / scale).round(),

    final file = await ImageCrop.cropImage(
      file: sample,
      area: area,


    _lastCropped = file;


Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  image_crop: ^0.3.2

2. Install it

You can install packages from the command line:

with Flutter:

$ 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:

import 'package:image_crop/image_crop.dart';
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]
Learn more about scoring.

We analyzed this package on Jul 12, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package does not support Flutter platform linux


  • package:image_crop/image_crop.dart that declares support for platforms: android, ios

Package does not support Flutter platform macos


  • package:image_crop/image_crop.dart that declares support for platforms: android, ios

Package does not support Flutter platform web


  • package:image_crop/image_crop.dart that declares support for platforms: android, ios

Package does not support Flutter platform windows


  • package:image_crop/image_crop.dart that declares support for platforms: android, ios

Package not compatible with SDK dart


  • image_crop that is a package requiring null.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.68.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.2
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies