关于flutter:Flutter-如何在10分钟内快速的创建图片编辑器

我最近在做一个社交 APP，外面须要图片、视频的编辑器，如果你和我一样有这样的需要

你能够试试这款 https://img.ly

https://promise-amadi.medium….

https://github.com/Wizpna/pho…

https://img.ly/photo-sdk
https://pub.dev/packages/phot…
https://pub.dev/packages/imag…

大家好，在明天的文章中，你将学习如何应用 Flutter 和 Img.ly 构建一个照片编辑应用程序。

然而，在我深刻本教程的技术方面之前，我想对 IMG.LY 做一个简略的解释。

IMG.LY 是一家总部位于德国的公司，通过其图片和视频编辑 SDK 提供最先进的图像和视频解决解决方案。

次要用于照片编辑目标，而且 SDK 很容易在挪动应用程序上实现。

应用 Visual Studio、IntelliJ 或 Android Studio 创立一个新的 Flutter 我的项目。

胜利创立一个新的 flutter 我的项目后，关上“pubspec.yaml”，并装置 photo_editor_sdk 和 image_picker 插件。

dependencies:
  photo_editor_sdk: ^2.0.0
  image_picker: ^0.8.1+3

留神: image_picker 这个插件将用于从设施中获取照片，而 photo_editor_sdk 将用于照片编辑。

SDK 相当大，因而你须要为你的我的项目启用 Multidex 如下:

编辑 android/build.gradle 并在顶部增加以下行

buildscript {
    repositories {google()
        jcenter()
        maven {url "https://artifactory.img.ly/artifactory/imgly"}
    }
    dependencies {classpath 'com.android.tools.build:gradle:4.1.0' classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" classpath 'ly.img.android.sdk:plugin:8.3.1'}
}

请留神: 为了更新 Android 版本的 PhotoEditor SDK，将版本字符串 version 8.3.1 替换为更新的版本 newer release。

关上 **android/app/build.gradle** file (not android/build.gradle) 并在开端增加以下代码行:

android {
  defaultConfig {
      applicationId "com.example.photo_editor" minSdkVersion 16
      targetSdkVersion 30
      versionCode flutterVersionCode.toInteger()
      versionName flutterVersionName
      multiDexEnabled true
  }
}
dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'androidx.multidex:multidex:2.0.1'
}

关上 android/app/build.gradle file (not android/build.gradle) 在 apply plugin 上面增加以下行 apply plugin: "com.android.application":

apply plugin: 'ly.img.android.sdk'
apply plugin: 'kotlin-android'

apply plugin: 'ly.img.android.sdk'apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"// Comment out the modules you don't need, to save size.
imglyConfig {
    modules {
        include 'ui:text'
        include 'ui:focus'
        include 'ui:frame'
        include 'ui:brush'
        include 'ui:filter'
        include 'ui:sticker'
        include 'ui:overlay'
        include 'ui:transform'
        include 'ui:adjustment'
        include 'ui:text-design'// This module is big, remove the serializer if you don't need that feature.
        include 'backend:serializer'// Remove the asset packs you don't need, these are also big in size.
        include 'assets:font-basic'
        include 'assets:frame-basic'
        include 'assets:filter-basic'
        include 'assets:overlay-basic'
        include 'assets:sticker-shapes'
        include 'assets:sticker-emoticons'include 'backend:sticker-smart'
    }
}

关上 <project root>/ios/Runner/Info.plist 并将以下键增加到 Info.plist 文件中

<key>NSPhotoLibraryUsageDescription</key>
           <string>app needs permission for the photo library</string>
           <key>NSCameraUsageDescription</key>
           <string>app needs access to the camera.</string>
           <key>NSMicrophoneUsageDescription</key>
           <string>app needs access to the microphone, if you intend to record videos.</string>

关上你的 main.dart 文件，像上面的代码片段一样更新你的代码:

您必须创立一个名为 imgFromGallery 的办法

当调用 imgFromGallery 办法时，它将关上设施上的图像目录。

下一步将创立另一个名为 imglyEditor. 的办法。

当调用 imglyEditor 办法时，它将关上 Img.ly 编辑器。

应用物理设施或模拟器测试运行应用程序。

P.S: 这是源码 source code

https://ducafecat.tech/
https://github.com/ducafecat
微信群 ducafecat
b 站 https://space.bilibili.com/40…

https://github.com/ducafecat/…

https://getstrapi.cn

https://ducafecat.tech/catego…

https://space.bilibili.com/40…

关于flutter:Flutter-如何在10分钟内快速的创建图片编辑器

猫哥说

原文

源码

参考

注释

那么让咱们开始吧

为 Android 配置 PhotoEditor SDK

为 iOS 设置 ImagePicker

往期

开源

GetX Quick Start

新闻客户端

strapi 手册译文

微信探讨群 ducafecat

系列汇合

译文

开源我的项目

Dart 编程语言根底

Flutter 零根底入门

Flutter 实战从零开始新闻客户端

Flutter 组件开发

Flutter Bloc

Flutter Getx4

Docker Yapi

猫哥说

原文

源码

参考

注释