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

Table of contents

• 📷 Preview
• ✨ Features
• 🔧 Getting started
  • Android
  • OpenHarmony
  • Web
• ❓ Usage
  • Open the editor in a new page
  • Show the editor inside of a widget
  • Own stickers or widgets
  • Grounded-Design
  • Frosted-Glass-Design
  • WhatsApp-Design
  • Highly configurable
  • Custom Widgets
  • Upload to Firebase or Supabase
  • Import-Export state history
• 📚 Documentation
• 🤝 Contributing
• 📜 License
• 📜 Notices

Preview

Grounded-Design	Frosted-Glass-Design

WhatsApp-Design	Paint-Editor

Text-Editor	Crop-Rotate-Editor

Filter-Editor	Emoji-Editor

Sticker/ Widget Editor	Blur-Editor

Features

• ✅ Multiple-Editors
  • ✅ Paint-Editor
    • ✅ Color picker
    • ✅ Multiple forms like arrow, rectangle, circle and freestyle
  • ✅ 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

• ✨ Paint-Editor
  • New mode which pixelates the background
  • Freestyle-Painter with improved performance and hitbox
• ✨ Text-Editor
  • Text-layer with an improved hit-box and ensure it's vertically centered on all devices
• ✨ AI Futures => Perhaps integrating Adobe Firefly

Getting started

Android

To enable smooth hit vibrations from a helper line, you need to add the VIBRATE permission to your AndroidManifest.xml file.

<uses-permission android:name="android.permission.VIBRATE"/>

OpenHarmony

To enable smooth hit vibrations from a helper line, you need to add the VIBRATE permission to your project's module.json5 file.

"requestPermissions": [
    {"name" :  "ohos.permission.VIBRATE"},                
]

Web

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 can cause problems on some devices, especially mobile devices. If you don't know the exact type of phone your customers will be using, it is recommended to use the Canvas renderer.

To enable the Canvaskit renderer by default for better compatibility with mobile web devices, 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();
      });
    }
});

By making this change, you can enhance filter compatibility and ensure a smoother experience on older Android phones and various mobile web devices.
You can view the full web example here.

iOS, macOS, Linux, Windows

No further action is required.

Usage

Import first the image editor like below:

import 'package:pro_image_editor/pro_image_editor.dart';

Open the editor in a new page

void _openEditor() {
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => ProImageEditor.network(
        'https://picsum.photos/id/237/2000',
        callbacks: ProImageEditorCallbacks(
          onImageEditingComplete: (Uint8List bytes) async {
            /*
              Your code to handle the edited image. Upload it to your server as an example.
              You can choose to use await, so that the loading-dialog remains visible until your code is ready, or no async, so that the loading-dialog closes immediately.
              By default, the bytes are in `jpg` format.
            */
            Navigator.pop(context);
          },
        ),
      ),
    ),
  );
}

Show the editor inside of a widget

@override
Widget build(BuildContext context) {
    return Scaffold(
        body: ProImageEditor.network(
          'https://picsum.photos/id/237/2000',
           callbacks: ProImageEditorCallbacks(
             onImageEditingComplete: (Uint8List bytes) async {
               /*
                 Your code to handle the edited image. Upload it to your server as an example.
                 You can choose to use await, so that the loading-dialog remains visible until your code is ready, or no async, so that the loading-dialog closes immediately.
                 By default, the bytes are in `jpg` format.
                */
               Navigator.pop(context);
             },
          ),
        ),
    );
}

Own stickers or widgets

To display stickers or widgets in the ProImageEditor, you have the flexibility to customize and load your own content. The buildStickers method allows you to define your own logic for loading stickers, whether from a backend, assets, or local storage, and then push them into the editor. The example here demonstrates how to load images that can serve as stickers and then add them to the editor.

Grounded design

To use the "Grounded-Design" you can follow the example here

Frosted-Glass design

To use the "Frosted-Glass-Design" you can follow the example here

WhatsApp design

The image editor offers a WhatsApp-themed option that mirrors the popular messaging app's design. The editor also follows the small changes that exist in the Material (Android) and Cupertino (iOS) version.

You can see the complete example here

Highly configurable

Customize the image editor to suit your preferences. Of course, each class like I18nTextEditor includes more configuration options.

return Scaffold(
  appBar: AppBar(title: const Text('Pro-Image-Editor')),
  body: ProImageEditor.network(
    'https://picsum.photos/id/237/2000',
    key: _editor,
    callbacks: ProImageEditorCallbacks(
      onImageEditingComplete: (Uint8List bytes) async {
        /*
              Your code to handle the edited image. Upload it to your server as an example.
              You can choose to use await, so that the loading-dialog remains visible until your code is ready, or no async, so that the loading-dialog closes immediately.
              By default, the bytes are in `jpg` format.
            */
        Navigator.pop(context);
      },
    ),
    configs: ProImageEditorConfigs(
      i18n: const I18n(
        various: I18nVarious(),
        paintEditor: I18nPaintEditor(),
        textEditor: I18nTextEditor(),
        cropRotateEditor: I18nCropRotateEditor(),
        filterEditor: I18nFilterEditor(filters: I18nFilters()),
        emojiEditor: I18nEmojiEditor(),
        stickerEditor: I18nStickerEditor(),
        // More translations...
      ),
      helperLines: const HelperLineConfigs(
        showVerticalLine: true,
        showHorizontalLine: true,
        showRotateLine: true,
        hitVibration: true,
      ),
      mainEditor: const MainEditorConfigs(
        widgets: MainEditorWidgets(),
        icons: MainEditorIcons(),
        style: MainEditorStyle(),
        enableCloseButton: true,
        // more...
      ),
      paintEditor: const PaintEditorConfigs(
        widgets: PaintEditorWidgets(),
        icons: PaintEditorIcons(),
        style: PaintEditorStyle(),
        canChangeOpacity: true,
        // more...
      ),
      textEditor: const TextEditorConfigs(
          widgets: TextEditorWidgets(),
          icons: TextEditorIcons(),
          style: TextEditorStyle(),
          autocorrect: true
          // more...
          ),
      cropRotateEditor: const CropRotateEditorConfigs(
        widgets: CropRotateEditorWidgets(),
        icons: CropRotateEditorIcons(),
        style: CropRotateEditorStyle(),
        canFlip: true,
        // more...
      ),
      filterEditor: const FilterEditorConfigs(
        widgets: FilterEditorWidgets(),
        icons: FilterEditorIcons(),
        style: FilterEditorStyle(),
        showLayers: true,
        // more...
      ),
      blurEditor: const BlurEditorConfigs(
        widgets: BlurEditorWidgets(),
        icons: BlurEditorIcons(),
        style: BlurEditorStyle(),
        showLayers: true,
        // more...
      ),
      tuneEditor: const TuneEditorConfigs(
        widgets: TuneEditorWidgets(),
        icons: TuneEditorIcons(),
        style: TuneEditorStyle(),
        showLayers: true,
        // more...
      ),
      emojiEditor: const EmojiEditorConfigs(
        icons: EmojiEditorIcons(),
        style: EmojiEditorStyle(),
        // more...
      ),
      imageGeneration: const ImageGenerationConfigs(
        processorConfigs: ProcessorConfigs(),
        // more
      ),
      designMode: ImageEditorDesignMode.material,
      heroTag: 'hero',
      theme: ThemeData(
        useMaterial3: true,
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.blue.shade800,
          brightness: Brightness.dark,
        ),
      ),
    ),
  ),
);

Custom Widgets

Customize the editor with your own widgets. For a complete example, refer to the custom widgets example.

Upload to Firebase or Supabase

ProImageEditor.asset(
  'assets/demo.png',
  callbacks: ProImageEditorCallbacks(
    onImageEditingComplete: (bytes) async {
      try {
        String path = 'your-storage-path/my-image-name.jpg';
        Reference ref = FirebaseStorage.instance.ref(path);

        /// In some special cases detect firebase the contentType wrong,
        /// so we make sure the contentType is set to jpg.
        await ref.putData(bytes, SettableMetadata(contentType: 'image/jpg'));
      } on FirebaseException catch (e) {
        debugPrint(e.message);
      }
      if (mounted) Navigator.pop(context);
    },
  ),
);

final _supabase = Supabase.instance.client;

ProImageEditor.asset(
  'assets/demo.png',
  callbacks: ProImageEditorCallbacks(
    onImageEditingComplete: (bytes) async {
      try {
        String path = 'your-storage-path/my-image-name.jpg';
        await _supabase.storage.from('my_bucket').uploadBinary(
              path,
              bytes,
              retryAttempts: 3,
            );
      } catch (e) {
        debugPrint(e.toString());
      }
      if (mounted) Navigator.pop(context);
    },
  ),
);

Import-Export state history

The state history from the image editor can be exported and imported. However, it's important to note that the crop and rotate feature currently only allows exporting the final cropped image and not individual states. Additionally, all sticker widgets are converted into images and saved in that format during the export process.

 await _editor.currentState?.exportStateHistory(
    // All configurations are optional
    configs: const ExportEditorConfigs(
        historySpan: ExportHistorySpan.all,
        exportPaint: true,
        exportText: true,
        exportCropRotate: true,
        exportFilter: true,
        exportTuneAdjustments: true,
        exportEmoji: true,
        exportBlur: true,
        exportWidgets: true,
        enableMinify: true,
    ),
  ).toJson(); // or => toMap(), toFile()

 _editor.currentState?.importStateHistory(
    // or => fromMap(), fromJsonFile()
    ImportStateHistory.fromJson( 
      /* Json-String from your exported state history */,
      configs: const ImportEditorConfigs(
        mergeMode: ImportEditorMergeMode.replace,
        recalculateSizeAndPosition: true,
      ),
    ),
  );

ProImageEditor.memory(
  bytes,
  key: _editor,
  callbacks: ProImageEditorCallbacks(
    onImageEditingComplete: (Uint8List bytes) async {
      /*
        Your code to handle the edited image. Upload it to your server as an example.
        You can choose to use await, so that the loading-dialog remains visible until your code is ready, or no async, so that the loading-dialog closes immediately.
        By default, the bytes are in `jpg` format.
      */
      Navigator.pop(context);
    },
  ),
  configs: ProImageEditorConfigs(
    stateHistory: StateHistoryConfigs(
      initStateHistory: ImportStateHistory.fromJson( 
        /* Json-String from your exported state history */,
        configs: const ImportEditorConfigs(
          mergeMode: ImportEditorMergeMode.replace,
          recalculateSizeAndPosition: true,
        ),
      ),
    ),
  ),
);

Documentation

Interactive layers

Each layer, whether it's an emoji, text, or painting, is interactive, allowing you to manipulate them in various ways. You can move and scale layers using intuitive gestures. Holding a layer with one finger enables you to move it across the canvas. Holding a layer with one finger and using another to pinch or spread allows you to scale and rotate the layer.

On desktop devices, you can click and hold a layer with the mouse to move it. Additionally, using the mouse wheel lets you scale the layer. To rotate a layer, simply press the 'Shift' or 'Ctrl' key while interacting with it.

Editor Widget

Constructors

ProImageEditor.memory

Creates a ProImageEditor widget for editing an image from memory.

ProImageEditor.file

Creates a ProImageEditor widget for editing an image from a file.

ProImageEditor.asset

Creates a ProImageEditor widget for editing an image from an asset.

ProImageEditor.network

Creates a ProImageEditor widget for editing an image from a network URL.

ProImageEditorConfigs

ProImageEditorCallbacks

Contributing

I welcome contributions from the open-source community to make this project even better. Whether you want to report a bug, suggest a new feature, or contribute code, I appreciate your help.

Bug Reports and Feature Requests

If you encounter a bug or have an idea for a new feature, please open an issue on my GitHub Issues page. I will review it and discuss the best approach to address it.

Code Contributions

If you'd like to contribute code to this project, please follow these steps:

1. Fork the repository to your GitHub account.
2. Clone your forked repository to your local machine.

git clone https://github.com/hm21/pro_image_editor.git

Contributors

Made with contrib.rocks.

Included Packages

This package uses several Flutter packages to provide a seamless editing experience. A big thanks to the authors of these amazing packages. Here’s a list of the packages we used in this project:

• emoji_picker_flutter
• http
• image
• rounded_background_text
• vibration

From these packages, only a small part of the code is used, with some code changes that better fit to the image editor.

• colorfilter_generator
• defer_pointer