Configure Overlays

PhotoEditor SDK supports several configuration options for the overlay tool allowing flexible adaptation to different needs and use cases. For a detailed explanation of how to configure different editor views, refer to this guide.

`blendModes`#

When selecting an overlay in the overlay tool, the user can switch between several blend modes. The allowed blend modes can be customized using the blendModes property. By default, the editor has all available blend modes for this tool enabled. For this example only a couple modes 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 PhotoOverlayConfigurationExample extends CodeExample {
  @override
  void invoke() async {
    // Create [OverlayOptions] to configure the overlay tool.
    final overlayOptions = OverlayOptions(
        // By default, all available blend modes are enabled.
        // For this example, only a couple are enabled for usage.
        blendModes: [
          BlendMode.colorBurn,
          BlendMode.darken,
          BlendMode.hardLight,
          BlendMode.lighten
        ]
        );

    // 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);
    }
  }
}

Configure Overlays

blendModes#

`blendModes`#