From App Bundle

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

Adding custom Filter Categories#

Custom filters can be added by specifying them in the configuration.filter.categories array. By default, the filters are grouped according to the provided FilterCategory instances passed to the configuration.

Each filter category takes a unique identifier, a name, an optional thumbnailUri as well as items - an array of Filters.

Adding custom Filters#

When adding custom filters, you can add both LUT filters as well as DuoTone filters.

LUT Filter#

Each filter takes a unique identifier, a name as well as a lutUri. Optionally, you can also provide a horizontalTileCount as well as a verticalTileCount. For further reference on the LUT filter concept, please have a look at the filter tool overview.

DuoTone Filter#

Each filter takes a unique identifier, a name, as well as a darkColor and a lightColor.

Adding existing Filters#

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


import 'dart:ui';

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

class PhotoFilterLocalExample extends CodeExample {
  @override
  void invoke() async {
    // Create [FilterOptions] to configure the filter tool.
    final filterOptions = FilterOptions(categories: [
      // A custom filter category.
      FilterCategory("custom_filter_group", "Custom",
          thumbnailUri: "assets/custom_filter_category.jpg",
          items: [
            // A custom LUT Filter.
            LutFilter("custom_lut_filter", "Custom LUT",
                "assets/custom_lut_invert.png"),

            // A custom DuoTone Filter.
            DuoToneFilter("custom_duotone_filter", "Custom DuoTone",
                const Color(0xFF002259), const Color(0xFFBD66FF))
          ]),
      // An existing filter category from the sdk.
      FilterCategory.existing("imgly_filter_category_bw")
    ]);

    // Create a [Configuration] instance.
    final configuration = Configuration(filter: filterOptions);

    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 tapped on the cancel button within the editor.
        return;
      }
    } catch (error) {
      // There was an error generating the image.
      print(error);
    }
  }
}