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.
- 📷 Preview
- ✨ Features
- 🔧 Setup
- ❓ Usage
- 📽️ Video-Editor
- 💖 Sponsors
- 📦 Included Packages
- 🤝 Contributors
- 📜 License
- 📜 Notices
| Grounded-Design | Frosted-Glass-Design | WhatsApp-Design |
|---|---|---|
|
|
|
| Ai-Commands | Ai-Remove-Background | Ai-Replace-Background |
|---|---|---|
|
|
|
| Paint-Editor | Text-Editor | Crop-Rotate-Editor |
|---|---|---|
|
|
|
| Filter-Editor | Emoji-Editor | Sticker/ Widget Editor |
|---|---|---|
|
|
|
- 🎨 Paint Editor: Draw freehand with various brushes, shapes (like circles and arrows), and apply blur or pixelation for censoring.
🅰️ Text Editor: Add and style text with full customization.- ✂️ Crop & Rotate Editor: Crop, flip, and rotate images with ease.
- 🎛️ Tune Adjustments: Adjust brightness, contrast, saturation, and more.
- 📸 Filter Editor: Apply custom or predefined image filters.
- 💧 Blur Editor: Add blur to any part of the image.
- 😀 Emoji Picker: Quickly insert emojis into your design.
- 🖼️ Sticker Editor: Add and manage custom image stickers.
- 🧵 Multi-Threading
- Use isolates for background tasks on native platforms.
- Use web workers for background tasks in web environments.
- Auto- or manually configure the number of active background processors based on device capabilities.
- 🖼️ Flexible Image Input: Load images from memory, assets, files, or network.
- 🌍 i18n Support: Translate every string in the UI.
- 🎚️ Per-Editor Configuration: Each module offers extensive customization options.
- 🧱 Fully Customizable: Swap icons, styles, and widgets for any subeditor.
- 📐 Helper Lines: Snap and align objects more accurately.
- ↩️ Undo/Redo support for non-destructive editing.
- 🔁 Movable Background Image: Position the base image as needed.
- 🔀 Reorder Layers: Change layer stacking order dynamically.
- 🎯 Interactive Layers: Select and manipulate each element with precision.
- 🖌️ Hit Detection: Paint layers support interactive selection.
- 🔍 Zoom Support: Zoom in/out in both paint and main editor views.
- 🖱️ Enhanced Desktop UX: Fine-tuned movement and scaling on desktop platforms.
- 🪵 Grounded Theme
- 🧊 Frosted Glass Theme
- 💬 WhatsApp Theme
- 🤖 AI Assistant: Integrate ChatGPT, Gemini, or other AI models to assist with image editing via smart suggestions or direct commands.
- 🎥 Video Editor: Seamlessly combine image and video editing workflows.
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.
No additional setup required.
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);
}
),
),
*/
),
);
}The editor offers three prebuilt designs:
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.
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, 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, and a simpler example using just the default video_player is available here.
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:
Made with contrib.rocks.
