关于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 将用于照片编辑。

为 Android 配置 PhotoEditor 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'    }}

为 iOS 设置 ImagePicker

关上 <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...

往期

开源

GetX Quick Start

https://github.com/ducafecat/...

新闻客户端

https://github.com/ducafecat/...

strapi 手册译文

https://getstrapi.cn

微信探讨群 ducafecat

系列汇合

译文

https://ducafecat.tech/catego...