New Project Setup

Introduction#

This guide provides step-by-step instructions for integrating the imgly_editor plugin into a new mobile Flutter project. By the end of this guide, you will have a powerful creative editor running in your own Flutter application.

Note: Customizing the CreativeEditor SDK for Flutter is handled exclusively through native code (Swift/Kotlin), as outlined in our configuration overview section.

Pre-requisites#

Before you begin, make sure the following requirements are met:

• A properly configured Flutter development environment
• Platform-specific development setup for your target (Android and/or iOS)
• Git CLI installed
• A valid IMG.LY license key - Get one here

Minimum Requirements#

• Flutter: 3.16.0
• Dart: 2.12.0
• iOS: 16
• Swift: 5.10 (Xcode 15.4)
• Android: 7.0 (Android SDK 24)

Create the Project#

First, create a new Flutter project, e.g. by using the following command:

flutter create imgly_editor_app

Then, open the newly created project in your preferred editor.

Add Dependency#

Add the imgly_editor dependency to your project via:

flutter pub add imgly_editor

or manually in your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  imgly_editor: 1.52.0

Android Setup#

If your application includes Android as a target platform, some manual configuration is required on the Android side. Please complete the following steps to ensure proper integration:

First, set the minSdk to at least 24 in android/app/build.gradle.kts:

defaultConfig {
  applicationId = "com.example.imgly_editor_app"
  minSdk = 24
  targetSdk = flutter.targetSdkVersion
  versionCode = flutter.versionCode
  versionName = flutter.versionName
}

Then, include the IMG.LY maven url in android/build.gradle.kts:

allprojects {
    repositories {
        google()
        mavenCentral()
        maven { url = uri("https://artifactory.img.ly/artifactory/maven") }
    }
}

Last but not least, set the Kotlin version to at least 1.9.10 in android/settings.gradle.kts.

id("org.jetbrains.kotlin.android") version "1.9.10" apply false

Using the Creative Editor#

To finally make use of the editor, call the IMGLYEditor.openEditor function with suitable EditorSettings and optionally your desired EditorPreset passed in:

import "package:imgly_editor/imgly_editor.dart";

class Editor {
  static openEditor() async {
    final settings = EditorSettings(
      license: "YOUR_LICENSE",
      userId: "YOUR_USER_ID"
    );

    final _ = await IMGLYEditor.openEditor(
      settings: settings,
      preset: EditorPreset.design
    );
  }
}

Within a new class, define an asynchronous function named openEditor, where you will initialize the EditorSettings. After providing your valid license key and an optional unique user ID, pass the configured settings to IMGLYEditor.openEditor(). At this point, you can also specify an optional EditorPreset to open one of our predefined editor variants.

Once set up, you can launch the editor by calling Editor.openEditor() from any desired location in your codebase.

Now, you can launch the editor by calling Editor.openEditor() from wherever you want to open it from.

Next Steps#

• Explore the available presets tailored to different editor solutions.
• Set up a native interface to customize the editor according to your specific requirements.

Common Errors#

Dependency not found#

Resolving dependencies...
Because imgly_editor_app depends on imgly_editor x.xx.x which doesn't match any versions, version solving failed.

Solution -> Ensure you are using an existing version of the IMG.LY editor.