croppie_dart 2.4.1

  • Installing
  • Versions
  • 76


A Dart wrapper for the Javascript image cropper library Croppie Croppie


For Croppie specific information, please take a look at there documentation.



Include js and css within your index.html

    <link rel="stylesheet" href="packages/croppie_dart/src/js/croppie.css" />
    <!--exif.js If you need-->
    <script defer src="packages/croppie_dart/src/js/exif.js"></script>
    <script src="packages/croppie_dart/src/js/croppie.min.js"></script>

Basic usage example (standard Croppie methods):

    import 'package:croppie_dart/croppie_dart.dart';
    import 'dart:html';
    Element croppieElement = querySelector("#croppie-element");
    Croppie croppie = new Croppie(croppieElement, new Options());
    croppie.bind(new BindConfiguration(url: "image_url"));
    // Some actions on croppie instance.
    Promise promise = croppie.result(String type, String size, String format, int quality, bool circle);

Convenience methods (Async / await):

This library provides a promise - async / await wrapper and several convenience methods to bind and get Croppie results in a typesafe manner.

    import 'package:croppie_dart/croppie_dart.dart';
    import 'dart:html';
    import 'dart:async';
    Element croppieElement = querySelector("#croppie-element");
    Croppie croppie = new Croppie(croppieElement, new Options());
    await croppie.bindAsync(new BindConfiguration(url: "image_url"));
    // Some actions on croppie instance. 
    // Async / await 
    Uint8List binary = await croppie.resultByteArray();
    Blob blob = await croppie.resultBlob();
    Element element = await croppie.resultHtml();
    String base64 = await croppie.resultBase64();
    CanvasElement canvas = await croppie.resultRawCanvas();


This library contains no component at the moment. Because it's very easy to integrate.

    <!--Template reference on the target cropping div-->
    <div #cropping></div>
    ElementRef croppingElementRef;
    Croppie croppie = new Croppie(croppingElementRef.nativeElement,new Options());


This version is corresponding with the original project

Features and bugs

Please file feature requests and bugs at the issue tracker.



  • First version.

Use this package as a library

1. Depend on it

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

  croppie_dart: "^2.4.1"

2. Install it

You can install packages from the command line:

with pub:

$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

      import 'package:croppie_dart/croppie_dart.dart';
Version Uploaded Documentation Archive
2.4.1 Apr 26, 2017 Go to the documentation of croppie_dart 2.4.1 Download croppie_dart 2.4.1 archive


We analyzed this package on Jun 19, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.0.0-dev.63.0
  • pana: 0.11.3


Describes how popular the package is relative to other packages. [more]
61 / 100
Code health derived from static analysis. [more]
99 / 100
Reflects how tidy and up-to-date the package is. [more]
77 / 100
Overall score:
Weighted score of the above. [more]
Learn more about scoring.


Detected platforms: web

Primary library: package:croppie_dart/croppie_dart.dart with components: html, js.


  • Homepage does not exists.

    We were unable to access at the time of the analysis.

  • Package is getting outdated.

    The package was released 59 weeks ago.

  • Maintain an example.

    Create a short demo in the example/ directory to show how to use this package. Common file name patterns include: main.dart, example.dart or you could also use croppie_dart.dart.

  • Fix analysis and formatting issues.

    Analysis or formatting checks reported 2 hints.

    Run dartfmt to format lib/croppie_dart.dart.

    Run dartfmt to format lib/src/croppie_dart_base.dart.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.23.0 <2.0.0
js ^0.6.1 0.6.1
Dev dependencies
test ^0.12.20