image_crop_widget 0.0.3

  • Readme
  • Changelog
  • Example
  • Installing
  • new55

image_crop_widget #

A Flutter widget to crop images. The widget is completely written in Dart and has minimal dependencies.

The widget displays the image within the given layout space. On top of the image a transparent rectangular overlay, with handles on each corner, is drawn. The overlay handles can be dragged by touch to adjust the cropping area.


By calling the cropImage() method on the widget's state object, the image area that is marked by the overlay is returned as a new image object.

To acquire the widget's state you can use a GlobalKey object.


import 'dart:ui'; // This imports the 'Image' class.

final key = GlobalKey<ImageCropState>();
Image imageObject = ...


ImageCrop(key: key, image: imageObject) // This could be used inside a  build method.


final cropedImage = await key.currentState.cropImage(); // This could be used inside a 'onPress' handler method.

How to create an image object #

The Image class from dart:ui is typically not instantiated directly. Instead, you could convert your image data into a Uint8List and instantiate the image like this:

Uint8List bytes = ...
final codec = await instantiateImageCodec(bytes);
final frame = await codec.getNextFrame();
final image = frame.image;

[0.0.3] - 2019-10-08.

Fixed the image link inside the readme.

[0.0.2] - 2019-10-08.

Added a new example.

[0.0.1] - 2019-10-08.

Initial release of the library.

  • Includes a Flutter widget to display and crop an image.


import 'dart:ui' as ui;

import 'package:flutter/material.dart';
import 'package:image_crop_widget/image_crop_widget.dart';

class ExampleScreen extends StatefulWidget {
  final ui.Image imageFile;

  _ExampleScreenState createState() => _ExampleScreenState();

class _ExampleScreenState extends State<ExampleScreen> {
  final key = GlobalKey<ImageCropState>();

  void _onCropPress() async {
    final croppedImage = await key.currentState.cropImage();

      context: context,
      builder: (context) => RawImage(
        image: croppedImage,
        fit: BoxFit.contain,
        height: croppedImage.height.toDouble(),

  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: <Widget>[
              child: ImageCrop(key: key, image: widget.imageFile),
              child: Text("Okay"),
              onPressed: _onCropPress,

Use this package as a library

1. Depend on it

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

  image_crop_widget: ^0.0.3

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_widget/image_crop_widget.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 Oct 9, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.5.1
  • pana: 0.12.21
  • Flutter: 1.9.1+hotfix.4


Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Maintenance suggestions

Package is pre-v0.1 release. (-10 points)

While nothing is inherently wrong with versions of 0.0.*, it might mean that the author is still experimenting with the general direction of the API.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies