Skip to main content
Language:

Annotations

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

Configuring menu items#

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.

File:
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 {
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);
}
}
}