pro_image_editor - Dart API docs

The ProImageEditor is a Flutter widget designed for image editing within your application. It provides a flexible and convenient way to integrate image editing capabilities into your Flutter project.

Demo Website

📷 Preview
✨ Features
🔧 Setup
❓ Usage
📽️ Video-Editor
💖 Sponsors
📦 Included Packages
🤝 Contributors
📜 License
📜 Notices

Preview

Grounded-Design	Frosted-Glass-Design	WhatsApp-Design

Paint-Editor	Text-Editor	Crop-Rotate-Editor

Filter-Editor	Emoji-Editor	Sticker/ Widget Editor

Features

✅ Multiple-Editors
- ✅ Paint-Editor
  - ✅ Color picker
  - ✅ Multiple forms like arrow, rectangle, circle and freestyle
  - ✅ Censor areas with blur or pixelation
- ✅ Text-Editor
  - ✅ Color picker
  - ✅ Align-Text => left, right and center
  - ✅ Change Text Scale
  - ✅ Multiple background modes like in whatsapp
- ✅ Crop-Rotate-Editor
  - ✅ Rotate
  - ✅ Flip
  - ✅ Multiple aspect ratios
  - ✅ Reset
  - ✅ Double-Tap
  - ✅ Round cropper
- ✅ Tune-Adjustments-Editor
- ✅ Filter-Editor
- ✅ Blur-Editor
- ✅ Emoji-Picker
- ✅ Sticker-Editor
✅ Multi-Threading
- ✅ Use isolates for background tasks on Dart native devices
- ✅ Use web-workers for background tasks on Dart web devices
- ✅ Automatically or manually set the number of active background processors based on the device
✅ Undo and redo function
✅ Use your image directly from memory, asset, file or network
✅ Each icon, style or widget can be changed
✅ Any text can be translated "i18n"
✅ Many custom configurations for each subeditor
✅ Selectable design mode between Material and Cupertino
✅ Reorder layer level
✅ Movable background image
✅ Multiple prebuilt themes
- ✅ Grounded-Theme
- ✅ WhatsApp Theme
- ✅ Frosted-Glass Theme
✅ Interactive layers
✅ Helper lines for better positioning
✅ Hit detection for painted layers
✅ Zoomable paint and main editor
✅ Improved layer movement and scaling functionality for desktop devices

Planned features

✨ Video-Editor
✨ Paint-Editor
- Freestyle-Painter with improved performance and hitbox
✨ AI Futures => Perhaps integrating Adobe Firefly
✨ Helper lines to align items with each other
✨ Advanced eraser function
✨ Different horizontal/vertical layer scale factor

Setup

Web

Show web setup

If you're displaying emoji on the web and want them to be colored by default (especially if you're not using a custom font like Noto Emoji), you can achieve this by adding the useColorEmoji: true parameter to your flutter_bootstrap.js file, as shown in the code snippet below:

{{flutter_js}}
{{flutter_build_config}}

_flutter.loader.load({
    serviceWorkerSettings: {
        serviceWorkerVersion: {{flutter_service_worker_version}},
    },
    onEntrypointLoaded: function (engineInitializer) {
      engineInitializer.initializeEngine({
        useColorEmoji: true, // add this parameter
        renderer: 'canvaskit'
      }).then(function (appRunner) {
        appRunner.runApp();
      });
    }
});

The HTML renderer is not supported in the image editor and has been completely removed in Flutter version >= 3.29.0. However, if you are using an older Flutter version < 3.29, please ensure that you enforce the canvas renderer.

To enable the Canvaskit renderer by default, you can do the following in your flutter_bootstrap.js file.

{{flutter_js}}
{{flutter_build_config}}

_flutter.loader.load({
    serviceWorkerSettings: {
        serviceWorkerVersion: {{flutter_service_worker_version}},
    },
    onEntrypointLoaded: function (engineInitializer) {
      engineInitializer.initializeEngine({
        useColorEmoji: true,
        renderer: 'canvaskit' // add this parameter
      }).then(function (appRunner) {
        appRunner.runApp();
      });
    }
});

You can view the full web example here.

Android, iOS, macOS, Linux, Windows

No additional setup required.

Usage

import 'package:pro_image_editor/pro_image_editor.dart';

@override
Widget build(BuildContext context) {
  return ProImageEditor.network(
    'https://picsum.photos/id/237/2000',
    callbacks: ProImageEditorCallbacks(
      onImageEditingComplete: (Uint8List bytes) async {
        /*
          Your code to process the edited image, such as uploading it to your server.

          You can choose to use await to keep the loading dialog visible until 
          your code completes, or run it without async to close the loading dialog immediately.

          By default, the image bytes are in JPG format.
        */
        Navigator.pop(context);
      },
        /* 
        Optional: If you want haptic feedback when a line is hit, similar to WhatsApp, 
        you can use the code below along with the vibration package.

          mainEditorCallbacks: MainEditorCallbacks(
            helperLines: HelperLinesCallbacks(
              onLineHit: () {
                Vibration.vibrate(duration: 3);
              }
            ),
          ),
        */
    ),
  );
}

Designs

The editor offers three prebuilt designs:

Extended-Configurations

The editor provides extensive customization options, allowing you to modify text, icons, colors, and widgets to fit your needs. It also includes numerous callbacks for full control over its functionality.

Check out the web demo to explore all possibilities. You can find the example code for all demos here.

Video-Editor

The video editor is an upcoming feature now included in the example folder. It is planned to support all platforms except web. The image editor already provides all required functionality, but the video processing package is still under development.

To keep the image editor as lightweight as possible, you’ll need to manually include video player package of your choice.

Currently, the editor can be extended using my pro_video_editor package, which supports full video generation on Android, iOS, and macOS. However, it relies on the GPL-licensed ffmpeg package, which may not be suitable for all companies. I’m actively exploring alternative solutions—feel free to reach out if you’re aware of a similar option with more permissive licensing.

Alternatively, as shown in the video examples, the editor returns all the necessary information for processing videos. This allows you to integrate any package or API of your choice. For instance, you could use a cloud-based solution like Shotstack to handle video processing externally.

If you're interested in contributing to this feature, feel free to open a pull request in the pro_video_editor repository. Alternatively, sponsoring the package would enable me to dedicate more time to its development and to this functionality.

Included Packages

A big thanks to the authors of these amazing packages.

Packages created by the Dart team:
Packages that are used with a minor modified version, but are not a direct dependency:

Contributors

Made with contrib.rocks.

Table of contents