From Remote URL

PhotoEditor 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:photo_editor_sdk/photo_editor_sdk.dart';

class PhotoTextRemoteExample extends CodeExample {
  @override
  void invoke() async {
    try {
      // 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}/LA.jpg');
      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 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);
    } finally {
      // Enable user interaction.
      InteractionBloc.shared.enable();
    }
  }
}