flutter pub add pro_image_editor基于插件公开信息、社区数据与项目使用情况整理的选型参考。
Pro Image Editor 是一个 Flutter 包，为在 Flutter 应用中编辑图像提供无缝且用户友好的界面。它支持裁剪、旋转、调整亮度、对比度和饱和度等基本编辑功能，非常适合需要随时随地进行图像增强的应用程序。该包兼容 Android、iOS、Web、macOS、Windows 和 Linux 多个平台，确保广泛的覆盖范围。通过直观的控制和高效的性能，它使开发者能够无需大量自定义开发即可集成强大的图像编辑功能。
以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。
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.
| 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 |
|---|---|---|
|
|
|
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();
});
}
});
You can view the full web example here.
No additional setup required.
package:flutter/material.dartSince v14 the editor is built on material_ui and cupertino_ui, which Flutter is decoupling from the SDK. If your app has not migrated its own MaterialApp yet, hand it the localizations of those packages, otherwise the editor's app bars, dialogs and bottom sheets throw No MaterialLocalizations found:
import 'package:material_ui/material_ui.dart' as material_ui;
MaterialApp(
localizationsDelegates: [
...material_ui.GlobalMaterialLocalizations.delegates,
// Your existing delegates, e.g. the ones from flutter_localizations.
],
// ...
);
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.
依赖清单 7 项
^1.0.2^1.6.0^1.1.1^2.1.8^2.5.4^2.2.0^1.1.1