Flutter Making an Image.file() image into an ImageProvider() for zoomable photos

Question

I've created an app that downloads a bunch of information for off-line use, much of which are photos. In the app, I'd like to use a widget that allows me to have a pan/zoom effect, but the ones I've found don't seem to play well with Image.file() and instead use ImageProviders.

For example, Photo_View only accepts AssetImage, and NetworkImage images which both inherit from ImageProvider, while Image.file() inherits from Diagnosticable. All of the packages that I've seen operate in basically the same way.

So, my question is how to convert Image.file() data into a ImageProvider format.

Solution 1

Instead of Image.file() use FileImage() that is type of ImageProvider.

From Doc:

Decodes the given File object as an image, associating it with the given scale.

See also:

Image.file for a shorthand of an Image widget backed by FileImage.

I think you can also use ExactAssetImage with Image File path(ex: image.path) but it should be in AssetBundle. Here what doc says about that:

ExactAssetImage class

Fetches an image from an AssetBundle, associating it with the given scale.

This implementation requires an explicit final assetName and scale on construction, and ignores the device pixel ratio and size in the configuration passed into resolve. For a resolution-aware variant that uses the configuration to pick an appropriate image based on the device pixel ratio and size, see AssetImage.

read more.

Solution 2

First import dart:io; then use

PhotoView(imageProvider: FileImage(File(path)))

Solution 3

This is what worked for me:

import 'dart:io' as io;

FileImage(io.File(_imageFile!.path)) as ImageProvider

where _imageFile is an XFile

Comments

[William Terrill]

I don't think that ExactAssetImage would work in this case, since it seems like it only works with images that are bundled with the app, and not files that have been downloaded. HOWEVER, FileImage() worked like a charm. Thank you!