Flutter图片编辑插件photo_editor_sdk的使用

插件简介

PhotoEditor SDK 是一个强大的图片编辑工具，支持Flutter开发。它提供了丰富的功能如滤镜、贴纸、文字添加等，使得在应用程序中集成高质量的照片编辑体验变得简单。

系统要求

• Flutter: 1.20.0
• Dart: 2.12.0
• iOS: 13
• Android: 5 (SDK 21)

开始使用

添加依赖

首先，在项目的pubspec.yaml文件中添加插件包：

dependencies:
  photo_editor_sdk: ^3.2.0

然后执行以下命令安装新的依赖：

flutter pub get

配置Android项目

对于Android项目，需要进行额外配置以确保正确集成PhotoEditor SDK。具体步骤如下：

1. 修改android/build.gradle

   打开android/build.gradle文件（注意不是android/app/build.gradle），并根据下面的内容进行修改：

   buildscript {
     ext.kotlin_version = '1.7.21'
     repositories {
         ...
         mavenCentral()
         maven { url "https://artifactory.img.ly/artifactory/imgly" }
         ...
     }
     dependencies {
         ...
         classpath 'com.google.devtools.ksp:com.google.devtools.ksp.gradle.plugin:1.7.21-1.0.8' // Depending on your `kotlin_version` version.
         classpath 'ly.img.android.sdk:plugin:10.9.0'
         ...
     }
   }
   
   allprojects {
       repositories {
           maven { url 'https://artifactory.img.ly/artifactory/imgly' }
       }
   }
   

2. 调整android/app/build.gradle

   在android/app/build.gradle文件中，调整minSdkVersion为至少21，并更新compileSdkVersion和buildToolsVersion到最新版本：

   android {
       compileSdkVersion 34
       buildToolsVersion "34.0.0"
       ...
       defaultConfig {
           ...
           minSdkVersion 21
           ...
       }
       ...
   }
   

3. 配置PhotoEditor SDK

   在android/app/build.gradle中添加以下内容来配置PhotoEditor SDK：

   apply plugin: 'ly.img.android.sdk'
   apply plugin: 'kotlin-android'
   
   IMGLY.configure {
       modules {
           include 'ui:text'
           include 'ui:focus'
           include 'ui:frame'
           // 根据需求选择性包含其他模块...
       }
   }
   

解锁PhotoEditor SDK

每个平台都需要单独的许可证文件。通过平台特定文件扩展名解锁PhotoEditor SDK：

• Android许可证：pesdk_license.android
• iOS许可证：pesdk_license.ios

将许可证文件放置在项目根目录下的assets文件夹中，并通过以下代码解锁：

PESDK.unlockWithLicense("assets/pesdk_license");

使用示例

接下来是完整的示例代码，演示如何在Flutter应用中使用PhotoEditor SDK：

import 'package:flutter/material.dart';
import 'package:imgly_sdk/imgly_sdk.dart';
import 'package:photo_editor_sdk/photo_editor_sdk.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Configuration createConfiguration() {
    final flutterSticker = Sticker(
        "example_sticker_logos_flutter", "Flutter", "assets/Flutter-logo.png");
    final imglySticker = Sticker(
        "example_sticker_logos_imgly", "img.ly", "assets/IgorSticker.png");

    final logos = StickerCategory(
        "example_sticker_category_logos", "Logos", "assets/Flutter-logo.png",
        items: [flutterSticker, imglySticker]);

    final emoticons =
        StickerCategory.existing("imgly_sticker_category_emoticons");

    final shapes =
        StickerCategory.existing("imgly_sticker_category_shapes", items: [
      Sticker.existing("imgly_sticker_shapes_badge_01"),
      Sticker.existing("imgly_sticker_shapes_arrow_02")
    ]);

    final configuration = Configuration(
        sticker: StickerOptions(personalStickers: true, categories: [
      logos,
      emoticons,
      shapes
    ]));

    return configuration;
  }

  void presentEditor() async {
    final result = await PESDK.openEditor(
        image: "assets/LA.jpg", configuration: createConfiguration());
    print(result?.toJson());
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: const Text('PhotoEditor SDK Example'),
          ),
          body: ListView.builder(
            itemBuilder: (context, index) {
              return ListTile(
                title: Text("Open photo editor"),
                subtitle: Text("Click to edit a sample image."),
                onTap: presentEditor,
              );
            },
            itemCount: 1,
          )),
    );
  }
}

这个例子展示了如何创建自定义的贴纸类别，并使用PESDK.openEditor()方法打开编辑器界面。用户点击列表项时，会调用presentEditor()函数，从而启动照片编辑器并传入配置信息。

示例项目

更多细节可以参考官方提供的示例项目，这可以帮助你更好地理解如何在实际应用中使用此插件。

许可证与支持

确保你已经获得了用于PhotoEditor SDK的商业许可证，特别是当你的应用程序涉及任何形式的商业化时。如果你有任何问题或需要技术支持，请访问服务台提交请求。