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

38次阅读

共计 3497 个字符，预计需要花费 9 分钟才能阅读完成。

猫哥说

我最近在做一个社交 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 如下:

  1. 编辑 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。

  1. 关上 **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'
}
  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…

开源我的项目

https://ducafecat.tech/catego…

Dart 编程语言根底

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

Flutter 零根底入门

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

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

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

Flutter 组件开发

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

Flutter Bloc

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

Flutter Getx4

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

Docker Yapi

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

正文完
flutter
发表至： flutter
2021-09-29
 0
关于flutter:Flutter-在流式场景下的架构设计与应用
关于flutter:Flutter-如何处理401-未授权的-Dio-拦截器
关于flutter:Flutter深入浅出组件篇MaterialApp
关于flutter:17-个提高性能的-Flutter-最佳实践