Configure Text Design

VideoEditor 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.


import 'dart:ui';

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

class VideoTextDesignConfigurationExample 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 {
      // Add a video from the assets directory.
      final video = Video("assets/Skater.mp4");

      // Open the video editor and handle the export as well as any occurring errors.
      final result =
          await VESDK.openEditor(video, configuration: configuration);

      if (result != null) {
        // The user exported a new video successfully and the newly generated video is located at `result.video`.
        print(result.video);
      } else {
        // The user tapped on the cancel button within the editor.
        return;
      }
    } catch (error) {
      // There was an error generating the video.
      print(error);
    }
  }
}

Configure Text Design

colors#

canvasActions#

`colors`#

`canvasActions`#