Insert image from an https:// url

[abinmittu]

Is it possible to give image source as an https url? Something like this:
[{"insert":"​","attributes":{"embed":{"type":"image","source":"https://random_image.jpg"}}},{"insert":"\n"}]

[pulyaevskiy]

Short answer is: yes.

Note I'd recommend using latest version from master branch for the following.

You'd need to implement your own ZefyrImageDelegate which looks like this:

abstract class ZefyrImageDelegate<S> {
  /// Builds image widget for specified [imageSource] and [context].
  Widget buildImage(BuildContext context, String imageSource);

  /// Picks an image from specified [source].
  ///
  /// Returns unique string key for the selected image. Returned key is stored
  /// in the document.
  Future<String> pickImage(S source);
}

There is default implementation which only handles local File and exists mostly as an example. In your app you'd definitely want roll your own. Here is how default delegate looks like:

class ZefyrDefaultImageDelegate implements ZefyrImageDelegate<ImageSource> {
  @override
  Widget buildImage(BuildContext context, String imageSource) {
    final file = new File.fromUri(Uri.parse(imageSource));
    final image = new FileImage(file);
    return new Image(image: image);
  }

  @override
  Future<String> pickImage(ImageSource source) async {
    final file = await ImagePicker.pickImage(source: source);
    if (file == null) return null;
    return file.uri.toString();
  }
}

As you can see it uses image_picker plugin. In your own version you are free to use whichever plugin suites your needs.

Now, the main thing to know here is how image information is stored in produced Delta. In short,

1. The string returned from pickImage gets stored in your document. It is up to you to define how this string looks like. It can be an absolute file path, an HTTP link or some unique key.
2. When editor needs to render the image it calls buildImage of your delegate with the string key you previously returned from pickImage. Here you simply need to return an Image widget configured with appropriate ImageProvider. So, if you used HTTP link you can use NetworkImage.

You can have more complex flows here as well. For instance, in my project I use Firebase Storage to upload images. When user picks a new image I return unique ID of that image generated by Firebase Storage. Then in buildImage I create a custom Image widget which is responsible for caching images locally and showing simple upload progress indicator for newly added images.

Hope this helps.

[bravekingzhang]

thank you!