From Remote URL

VideoEditor SDK supports loading fonts from a remote URL, this can be a resource hosted by a hosting provider or by your servers. Although the editor supports adding assets with remote URLs, we highly recommend that you manage the download of remote resources yourself, since this gives you more control over the whole process.

Download the font#

In order to use a custom font in the editor, we are downloading the remote resource to the temporary directory.

Adding custom font#

Using the downloaded resource, we are loading the custom font into the configuration. Each custom font takes an identifier, a name, a fontName as well as a fontUri that points to a local font file which can either be a TTF or an OTF font.

Handle user interaction#

For this example, we are disabling user interaction while the download task is executing. In production, you might want to indicate download progress here. When the download has finished, we can reenable user interaction and dismiss the progress indicator.


import 'dart:io';

import 'package:catalog/bloc/interaction_bloc.dart';
import 'package:catalog/models/code_example.dart';
import 'package:flutter/foundation.dart';
import 'package:imgly_sdk/imgly_sdk.dart';
import 'package:path_provider/path_provider.dart';
import 'package:video_editor_sdk/video_editor_sdk.dart';

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

      // Disable user interaction.
      InteractionBloc.shared.disable();

      // Download the remote resource before loading it into the editor.
      final client = HttpClient();
      final request = await client.getUrl(Uri.parse(
          "https://img.ly/static/example-assets/custom_font_raleway_regular.ttf"));
      final response = await request.close();
      final bytes = await consolidateHttpClientResponseBytes(response);
      final outputDirectory = await getTemporaryDirectory();
      final outputFile = File('${outputDirectory.path}/Skater.mp4');
      await outputFile.writeAsBytes(bytes);

      // Create [TextOptions] to customize the text tool.
      final textOptions = TextOptions(fonts: [
        Font("custom_font_raleway_regular", "custom_font_raleway_regular",
            "Raleway",
            fontUri: outputFile.path)
      ]);

      // Create a [Configuration] instance.
      final configuration = Configuration(text: textOptions);

      // 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);
    } finally {
      // Enable user interaction.
      InteractionBloc.shared.enable();
    }
  }
}