<img src="https://github.com/hm21/pro_image_editor/blob/stable/assets/logo.jpg?raw=true" alt="Logo" />

<p>
    <a href="https://pub.dartlang.org/packages/pro_image_editor">
        <img src="https://img.shields.io/pub/v/pro_image_editor.svg" alt="pub package">
    </a>
    <a href="https://github.com/sponsors/hm21">
        <img src="https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&color=%23f5372a" alt="Sponsor">
    </a>
    <a href="https://img.shields.io/github/license/hm21/pro_image_editor">
        <img src="https://img.shields.io/github/license/hm21/pro_image_editor" alt="License">
    </a>
    <a href="https://github.com/hm21/pro_image_editor/issues">
        <img src="https://img.shields.io/github/issues/hm21/pro_image_editor" alt="GitHub issues">
    </a>
    <a href="https://hm21.github.io/pro_image_editor">
        <img src="https://img.shields.io/badge/web-demo---?&color=0f7dff" alt="Web Demo">
    </a>
</p>

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. 

<a href="https://hm21.github.io/pro_image_editor">Demo Website</a>

## Table of contents

- **[📷 Preview](#preview)**
- **[✨ Features](#features)**
- **[🔧 Setup](#setup)**
- **[❓ Usage](#usage)**
- **[📽️ Video-Editor](#video-editor)**
- **[💖 Sponsors](#sponsors)**
- **[📦 Included Packages](#included-packages)**
- **[🤝 Contributors](#contributors)**
- **[📜 License](LICENSE)**
- **[📜 Notices](NOTICES)**



## Preview
<table>
  <thead>
    <tr>
      <th align="center">Grounded-Design</th>
      <th align="center">Frosted-Glass-Design</th>
      <th align="center">WhatsApp-Design</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td align="center" width="33.3%">
        <img src="https://github.com/hm21/pro_image_editor/blob/stable/assets/preview/grounded-design.gif?raw=true" alt="Grounded-Design" />
      </td>
      <td align="center" width="33.3%">
        <img src="https://github.com/hm21/pro_image_editor/blob/stable/assets/preview/frosted-glass-design.gif?raw=true" alt="Frosted-Glass-Design" />
      </td>
      <td align="center" width="33.3%">
        <img src="https://github.com/hm21/pro_image_editor/blob/stable/assets/preview/whatsapp-design.gif?raw=true" alt="WhatsApp-Design" />
      </td>
    </tr>
  </tbody>
</table>
<table>
  <thead>
    <tr>
      <th align="center">Paint-Editor</th>
      <th align="center">Text-Editor</th>
      <th align="center">Crop-Rotate-Editor</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td align="center" width="33.3%">
        <img src="https://github.com/hm21/pro_image_editor/blob/stable/assets/preview/paint-editor.gif?raw=true" alt="Paint-Editor" />
      </td>
      <td align="center" width="33.3%">
        <img src="https://github.com/hm21/pro_image_editor/blob/stable/assets/preview/text-editor.gif?raw=true" alt="Text-Editor" />
      </td>
      <td align="center" width="33.3%">
        <img src="https://github.com/hm21/pro_image_editor/blob/stable/assets/preview/crop-rotate-editor.gif?raw=true" alt="Crop-Rotate-Editor" />
      </td>
    </tr>
  </tbody>
</table>
<table>
  <thead>
    <tr>
      <th align="center">Filter-Editor</th>
      <th align="center">Emoji-Editor</th>
      <th align="center">Sticker/ Widget Editor</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td align="center" width="33.3%">
        <img src="https://github.com/hm21/pro_image_editor/blob/stable/assets/preview/filter-editor.gif?raw=true" alt="Filter-Editor" />
      </td>
      <td align="center" width="33.3%">
        <img src="https://github.com/hm21/pro_image_editor/blob/stable/assets/preview/emoji-editor.gif?raw=true" alt="Emoji-Editor" />
      </td>
      <td align="center" width="33.3%">
        <img src="https://github.com/hm21/pro_image_editor/blob/stable/assets/preview/sticker-editor.gif?raw=true" alt="Sticker-Widget-Editor" />
      </td>
    </tr>
  </tbody>
</table>


## 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
- ✅ Video-Editor 


#### Planned features
- ✨ 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

<details>
  <summary>Show web setup</summary>

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:

```js
{{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();
      });
    }
});
```
<br/>

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.

```js
{{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();
      });
    }
});
```

<br/>

You can view the full web example [here](https://github.com/hm21/pro_image_editor/tree/stable/example/web).

</details>

#### Android, iOS, macOS, Linux, Windows

No additional setup required.


<br/>


## Usage

```dart
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:
- [Grounded](https://github.com/hm21/pro_image_editor/blob/stable/example/lib/features/design_examples/grounded_example.dart)
- [Frosted-Glass](https://github.com/hm21/pro_image_editor/blob/stable/example/lib/features/design_examples/frosted_glass_example.dart)
- [WhatsApp](https://github.com/hm21/pro_image_editor/blob/stable/example/lib/features/design_examples/whatsapp_example.dart)

#### 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](https://hm21.github.io/pro_image_editor/) to explore all possibilities. You can find the example code for all demos [here](https://github.com/hm21/pro_image_editor/tree/stable/example/lib/features).


## Video-Editor

The editor supports full video generation on Android, iOS, and macOS. Support for Windows and Linux is coming soon.

To keep the image editor lightweight, you’ll need to manually add the video player package of your choice. For rendering the video, you can use my package [pro_video_editor](https://pub.dev/packages/pro_video_editor), which is also used in the example.

An example of how to implement the video editor with a specific video player can be found [here](https://github.com/hm21/pro_image_editor/tree/stable/example/lib/features/video_examples), and a simpler example using just the default [video_player](https://pub.dev/packages/video_player) is available [here](https://github.com/hm21/pro_video_editor/blob/stable/example/lib/features/editor/pages/video_editor_basic_example_page.dart).





## Sponsors 
<p align="center">
  <a href="https://github.com/sponsors/hm21">
    <img src='https://raw.githubusercontent.com/hm21/sponsors/main/sponsorkit/sponsors.svg'/>
  </a>
</p>


## Included Packages

A big thanks to the authors of these amazing packages.

- Packages created by the Dart team:
  - [http](https://pub.dev/packages/http)
  - [plugin_platform_interface](https://pub.dev/packages/plugin_platform_interface)
  - [vector_math](https://pub.dev/packages/vector_math)
  - [web](https://pub.dev/packages/web)


- Packages that are used with a minor modified version, but are not a direct dependency:
  - [archive](https://pub.dev/packages/archive)
  - [defer_pointer](https://pub.dev/packages/defer_pointer)
  - [emoji_picker_flutter](https://pub.dev/packages/emoji_picker_flutter)
  - [image](https://pub.dev/packages/image)
  - [mime](https://pub.dev/packages/mime)
  - [rounded_background_text](https://pub.dev/packages/rounded_background_text)

## Contributors
<a href="https://github.com/hm21/pro_image_editor/graphs/contributors">
  <img src="https://contrib.rocks/image?repo=hm21/pro_image_editor" />
</a>

Made with [contrib.rocks](https://contrib.rocks).