Embedding Images
Note that Image API is considered experimental and is likely to be changed in backward incompatible ways. If this happens all changes will be described in detail in the changelog to simplify upgrading.
Zefyr supports embedding images. In order to handle images in your application you need to implement ZefyrImageDelegate
interface which looks like this:
There is no default implementation of this interface since resolving image sources is always application-specific.
Note that prior to 0.7.0 Zefyr did provide simple default implementation of
ZefyrImageDelegate
however it was removed as it introduced unnecessary dependency onimage_picker
plugin.
Implementing ZefyrImageDelegate
For this example we will use image_picker plugin which allows us to select images from device's camera or photo gallery.
Let's start from the pickImage
method:
This method is responsible for initiating image selection flow (either using camera or gallery), handling result of selection and returning a string value which essentially serves as an identifier for the image.
Returned value is stored in the document Delta and later on used to build the appropriate image widget.
It is up to the developer to define what this value represents.
In the above example we simply return a full path to the file on user's device, e.g. file:///Users/something/something/image.jpg
. Some other examples may include a web link, https://myapp.com/images/some.jpg
or an arbitrary string like an identifier of an image in a cloud storage like AWS S3.
For instance, if you upload files to your server you can initiate this task in pickImage
as follows:
Next we need to implement buildImage
. This method takes imageSource
argument which contains that same string you returned from pickImage
. Here you can use this value to create a Flutter widget which renders the image. Normally you would return the standard Image
widget from this method, but it is not a requirement. You are free to create a custom widget which, for instance, shows progress of upload operation that you initiated in the pickImage
call.
Assuming our first example where we returned full path to the image file on user's device, our buildImage
method can be as simple as following:
There is two more overrides we need to implement which configure source types used by Zefyr toolbar:
Now our image delegate is ready to be used by Zefyr so the last step is to pass it to Zefyr editor:
When imageDelegate
field is set to non-null value it automatically enables image selection button in Zefyr's style toolbar.
Last updated