Flutter图片编辑插件image_editor_pro的使用

ImageEditorPro

Image Editor 插件，支持简单的图片编辑功能，包括绘制、文字、滤镜、表情符号和贴纸等，类似于故事模式。

要开始使用此插件，我们需要在应用模块的gradle文件中添加依赖项，如下所示：

安装

首先，在 pubspec.yaml 文件中将 <code>image_editor_pro:</code> 添加为依赖项。

导入

import 'package:image_editor_pro/image_editor_pro.dart';

iOS

在 <project root>/ios/Runner/Info.plist 文件中添加以下键值对：

• <code>NSPhotoLibraryUsageDescription</code> - 描述应用为何需要访问相册权限。这是在可视化编辑器中称为 <em>Privacy - Photo Library Usage Description</em>。
• <code>NSCameraUsageDescription</code> - 描述应用为何需要访问相机权限。这是在可视化编辑器中称为 <em>Privacy - Camera Usage Description</em>。
• <code>NSMicrophoneUsageDescription</code> - 如果您打算录制视频，则描述应用为何需要访问麦克风权限。这是在可视化编辑器中称为 <em>Privacy - Microphone Usage Description</em>。

或者以文本格式添加这些键值对：

<key>NSPhotoLibraryUsageDescription</key>
<string>Used to demonstrate image picker plugin</string>
<key>NSCameraUsageDescription</key>
<string>Used to demonstrate image picker plugin</string>
<key>NSMicrophoneUsageDescription</key>
<string>Used to capture audio for image picker plugin</string>

Android

无需任何配置，插件可以直接使用。

在您的状态类中添加以下函数（参考示例代码）：

Future<void> getimageditor() async {
  final geteditimage = await Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) {
        return ImageEditorPro(
          appBarColor: Colors.blue, // 设置顶部工具栏颜色
          bottomBarColor: Colors.blue, // 设置底部工具栏颜色
        );
      },
    ),
  ).then((geteditimage) {
    if (geteditimage != null) {
      setState(() {
        _image = geteditimage; // 更新图片变量
      });
    }
  }).catchError((er) {
    print(er); // 捕获错误
  });
}

开发者

• Zeeshan

特别感谢

• Sanskar Tiwari

致谢

• 该项目灵感来源于 Burhanuddin Rashid 的 PhotoEditor

MIT 许可证

版权所有 © 2020 Zeeshux7860

经许可，免费获得本软件及其相关文档文件（“软件”）的副本，可以不受限制地处理软件，包括但不限于使用、复制、修改、合并、发布、分发、再许可和/或出售软件的副本，并允许他人这样做，但须遵守以下条件：

上述版权声明和本许可声明应包含在所有副本或实质性部分中。

软件按“原样”提供，不作任何明示或暗示的保证，包括但不限于适销性、特定用途适用性和非侵权的保证。在任何情况下，作者或版权持有人均不对因本软件或与本软件相关的使用或其他行为引起的任何索赔、损害或其他责任负责。

完整示例代码

以下是完整的示例代码，展示如何使用 image_editor_pro 插件：

import 'dart:io';
import 'package:image_editor_pro/image_editor_pro.dart';
import 'package:firexcode/firexcode.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return HomePage().xMaterialApp();
  }
}

class HomePage extends StatefulWidget {
  [@override](/user/override)
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  File _image;

  Future<void> getimageditor() async {
    final geteditimage = await Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) {
          return ImageEditorPro(
            appBarColor: Colors.black87, // 设置顶部工具栏颜色
            bottomBarColor: Colors.black87, // 设置底部工具栏颜色
            pathSave: null, // 保存路径（可选）
          );
        },
      ),
    ).then((geteditimage) {
      if (geteditimage != null) {
        setState(() {
          _image = geteditimage; // 更新图片变量
        });
      }
    }).catchError((er) {
      print(er); // 捕获错误
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return condition(
            condtion: _image == null,
            isTrue: 'Open Editor'.text().xRaisedButton(
              onPressed: () {
                getimageditor(); // 打开编辑器
              },
            ).toCenter(),
            isFalse:
                _image == null ? Container() : Image.file(_image).toCenter())
        .xScaffold(
            appBar: 'Image Editor Pro example'.xTextColorWhite().xAppBar(),
            floatingActionButton:
                Icons.add.xIcons().xFloationActiobButton(color: Colors.red));
  }
}

Widget condition({bool condtion, Widget isTrue, Widget isFalse}) {
  return condtion ? isTrue : isFalse;
}