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

But, before I dive into the technical side of this tutorial, I will like to give a brief explanation about IMG.LY.

What is Img.ly?

IMG.LY is a German-based company that offers cutting-edge image and video processing solutions with their Photo and Video editing SDK.

The PhotoEditorSDK is mainly used for photo editing purposes and the SDK is easy to implement on a mobile application.

So let's get started

Create a new flutter project with Visual Studio, IntelliJ, or Android studio. After successfully creating a new flutter project, Open "pubspec.yaml", and install photo_editor_sdk and image_picker 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 while photo_editor_sdk will be used for photo editing.

Configure PhotoEditor SDK for Android

PhotoEditor SDK for Android is quite large, because of that you will need to enable Multidex for your project as follows:

• Add the img.ly repository and plugin by opening the android/build.gradle file (not android/app/build.gradle) and add these lines 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 PhotoEditor SDK for Android replace the version string 8.3.1 with a newer release.

• Open the android/app/build.gradle file (not android/build.gradle) and add these lines 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'
}

• Opening the android/app/build.gradle file (not android/build.gradle) and adding the following lines under 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'
    }
}

Setting up ImagePicker for iOS

Open /ios/Runner/Info.plist and add the following keys to your 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 this code snippet below:

You will have to create a method called imgFromGallery

The imgFromGallery method when called will open the image directory on your device. The next step will be to create another method called imglyEditor.

The imglyEditor method when called will open the Img.ly editor.

Test run your app using a physical device or an emulator.

P.S: Here is the source code for the project you just worked on.

To remove the watermark on the photo editor, you will need to get a separate license file for each of the platforms (Android and iOS) to unlock the PhotoEditor SDK.

If you found this article helpful and educating, please hit the clap button 👏 as many times as you can to show your support!

To get my latest updates and happenings from the world of Flutter, and mobile app development, follow me on Twitter, Facebook, Linkedin, and Github.

My name is Promise Amadi. I am a writer and Flutter Developer. I work with startups across the globe to build mobile solutions using Flutter.

I'm open to collaboration on Flutter-based projects. Send an e-mail to amadipromise07@gmail.com.