From App Bundle

PhotoEditor SDK supports adding predefined as well as custom overlays from the app bundle.

Adding custom Overlays#

Custom overlays can be added by specifying them in the configuration.overlay.items array. Each overlay takes a unique identifier, a name, a blendMode, an overlayUri as well as an optional thumbnailUri.

Adding existing Overlays#

You can also add predefined overlays that are shipped with the SDK. By default, all of them are contained in the configuration.overlay.items array. To add predefined overlays, simply specify their identifiers. All available identifiers can be found here. For this example, only two predefined overlays are enabled.


import 'package:catalog/models/code_example.dart';
import 'package:imgly_sdk/imgly_sdk.dart';
import 'package:photo_editor_sdk/photo_editor_sdk.dart';

class PhotoOverlayLocalExample extends CodeExample {
  @override
  void invoke() async {
    // Create [OverlayOptions] to configure the overlay tool.
    final overlayOptions = OverlayOptions(items: [
      Overlay("custom_overlay", "Custom", BlendMode.overlay,
          "assets/imgly_overlay_grain.jpg"),
      Overlay.existing("imgly_overlay_rain"),
      Overlay.existing("imgly_overlay_mosaic")
    ]);

    // Create a [Configuration] instance.
    final configuration = Configuration(overlay: overlayOptions);

    try {
      // Open the photo editor and handle the export as well as any occurring errors.
      final result = await PESDK.openEditor(
          image: "assets/LA.jpg", configuration: configuration);

      if (result != null) {
        // The user exported a new photo successfully and the newly generated photo is located at `result.image`.
        print(result.image);
      } else {
        // The user exported a new photo successfully and the newly generated photo is located at `result.image`.
        return;
      }
    } catch (error) {
      // The user exported a new photo successfully and the newly generated photo is located at `result.image`.
      print(error);
    }
  }
}