Skip to main content
Language:

Configure Text Design

PhotoEditor SDK supports several configuration options for the text design 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.

colors#

By default, the editor provides a variety of different colors to customize the color of the text designs. Here, we only provide a small selection of colors as might be sensible for an annotation use case.

canvasActions#

The actions users can perform in the text design tool are configured via the canvasActions property. By default, the editor has all available overlay actions for this tool enabled. For this example TextDesignCanvasAction.undo and TextDesignCanvasAction.redo are removed.

File:
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 PhotoTextDesignConfigurationExample extends CodeExample {
  @override
  void invoke() async {
    // Create [TextDesignOptions] to configure the text design tool.
    final textDesignOptions = TextDesignOptions(
        // By default the editor provides a lot of colors.
        // For this example only a few colors are enabled.
        colors: ColorPalette(colors: [
          NamedColor(const Color.fromARGB(255, 255, 255, 255), "White"),
          NamedColor(const Color.fromARGB(0, 0, 0, 255), "Black"),
        ]),
        // By default the editor has all available overlay actions for this tool
        // enabled. For this example `CanvasAction.UNDO` and `CanvasAction.REDO`
        // are removed.
        canvasActions: [
          TextDesignCanvasAction.add,
          TextDesignCanvasAction.bringToFront,
          TextDesignCanvasAction.delete,
          TextDesignCanvasAction.invert
        ]
        );


    // Create a [Configuration] instance.
    final configuration = Configuration(textdesign: textDesignOptions);


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