How Flutter quickly creates an image editor in 10 minutes

Brother Cat said

I’m working on a social app recently, which requires an editor for pictures and videos. If you have such a need like me

You can try this https://img.ly

original

https://promise-amadi.medium.com/how-to-build-a-photo-editing-app-in-10-minutes-using-flutter-and-img-ly-5d9601173822

Source code

https://github.com/Wizpna/photo_editor.git

refer to

text

Hello everyone, in today's article, you will learn how to build a photo editing application using Flutter and Img.ly.

However, before I dive into the technical aspects of this tutorial, I want to give a brief explanation of IMG.LY.

IMG.LY is a German-based company that provides the most advanced image and video processing solutions through its image and video editing SDK.

Mainly used for photo editing purposes, and the SDK is easy to implement on mobile applications.

So let's get started

Use Visual Studio, IntelliJ or Android Studio to create a new Flutter project.

After successfully creating a new flutter project, open "pubspec.yaml" and install the photo_editor_sdk and plugins.

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

Note: image_picker This plugin will be used to get photos from the device, and photo_editor_sdk will be used for photo editing.

Configure PhotoEditor SDK for Android

The SDK is quite large, so you need to enable Multidex for your project as follows:

Edit android/build.gradle and add the following line at the top

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'
    }
}

Please note: In order to update the Android version of the PhotoEditor SDK, replace the version string version 8.3.1 with the updated version newer release .

Open **android/app/build.gradle** file (not android/build.gradle ) and add the following lines of code at the end:

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'
}

Open the android/app/build.gradle file (not android/build.gradle ) and add the following line apply plugin: "com.android.application" under apply plugin:

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'
    }
}

Set up ImagePicker for iOS

Open <project root>/ios/Runner/Info.plist and add the following keys to the Info.plist file

<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>

Open your main.dart file, and update your code like the following code snippet:

You must create a method imgFromGallery