Flutter 如何在10分鐘內快速的建立圖片編輯器

貓哥說

我最近在做一個社交 APP，裡面需要圖片、視訊的編輯器，如果你和我一樣有這樣的需求

你可以試試這款 https://img.ly

原文

https://promise-amadi.medium....

原始碼

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

參考

正文

大家好，在今天的文章中，你將學習如何使用 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 的方法