Flutter Image Annotation

While there is no dedicated tool for annotations, PhotoEditor SDK can easily be configured to include the features necessary for a powerful yet simple-to-use photo annotation tool. To this end we only enable features that are useful to annotate objects in a photo:

brush tool for flexible marking and colored highlights
sticker tool for including shapes such as arrows, tags or badges
text tool to provide information around annotation markers

Since we only want to include the three above mentioned tools, we only add those tools to the configuration.

Stickers#

We want to omit stickers that are not annotation specific, but rather add shapes such as arrows, tags or badges. To that end, we group suitable existing stickers in a custom StickerCategory and load this into the configuration. Consult the sticker configuration section for more details.

Open editor#

Finally, we load the previously created configuration into the editor for the customizations to take effect.

For a detailed explanation of how to configure different editor views, refer to this guide.


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

class PhotoAnnotationExample extends CodeExample {
  @override
  void invoke() async {
    // For this example only stickers suitable for annotations are enabled.
    // Therefore, create a custom [StickerCategory] to assign the options.
    final stickerCategory = StickerCategory(
        "annotation_stickers", "Annotation", "assets/sticker_thumbnail.png",
        items: [
          Sticker.existing("imgly_sticker_shapes_arrow_02"),
          Sticker.existing("imgly_sticker_shapes_arrow_03"),
          Sticker.existing("imgly_sticker_shapes_badge_11"),
          Sticker.existing("imgly_sticker_shapes_badge_12"),
          Sticker.existing("imgly_sticker_shapes_badge_36")
        ]);

    // Load the custom sticker category into the [StickerOptions].
    final stickerOptions = StickerOptions(categories: [stickerCategory]);

    // Create a [Configuration] instance.
    final configuration = Configuration(
        tools: [Tool.sticker, Tool.text, Tool.brush],
        sticker: stickerOptions);

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

Flutter Image Annotation

Configuring menu items#

Stickers#

Open editor#