From Remote URL

VideoEditor SDK supports loading stickers from a remote URL, this can be a resource hosted by a hosting provider or your own servers. The sticker tool is optimized for remote resources which allows to directly integrate a remote URL instead of downloading the asset beforehand. For an example of how to download the remote resources in advance see the font example.

Adding Sticker categories#

Stickers are added to the VideoEditor SDK via the configuration.sticker.categories array within a StickerCategory.

Adding custom categories#

Each StickerCategory takes a name, an identifier, a thumbnailUri as well as an array of Stickers via them items property. A category can be populated both with custom as well as existing stickers that are shipped with the SDK.

Adding existing categories#

Existing StickerCategories can be added by specifying the unique identifier. You can find all available identifiers of the predefined categories here.

Adding stickers#

A Sticker is always added to the SDK via a hosting StickerCategory as shown in the previous section.

Adding custom stickers#

Each Sticker takes an identifier, a name as well as a stickerUri pointing to the remote sticker file. The sticker identifier needs to be unique since it is used during the (de)serialization process.

Adding existing stickers#

Existing stickers can be added by specifying the corresponding identifier. You can find all available identifiers of the predefined categories here.


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

class VideoStickerRemoteExample extends CodeExample {
  @override
  void invoke() async {
    // Add a video from the assets directory.
    final video = Video("assets/Skater.mp4");

    // Create [StickerOptions] to customize the sticker tool.
    //
    // The sticker tool is optimized for remote resources which allows to directly
    // integrate a remote URL instead of downloading the asset before. For an
    // example on how to download the remote resources in advance and use the local
    // downloaded resources, see: lib/examples/text/addFonts/remote.
    final stickerOptions = StickerOptions(categories: [
      // A custom sticker category.
      StickerCategory("custom", "Custom",
          "https://img.ly/static/example-assets/custom_sticker_igor.png",
          items: [
            // A custom sticker.
            Sticker("custom_sticker_igor", "Igor",
                "https://img.ly/static/example-assets/custom_sticker_igor.png"),

            // An existing sticker.
            Sticker.existing("imgly_sticker_shapes_badge_01")
          ]),

      // An existing sticker category.
      StickerCategory.existing("imgly_sticker_category_emoticons")
    ]);

    // Create a [Configuration] instance.
    final configuration = Configuration(sticker: stickerOptions);

    try {
      // 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);
    }
  }
}