PickedFile – How to show image on web?

Issue

The user picks an image (resulting in PickedFile – a class that is supported on web), and I want to present that image on the screen (another screen).

For Android and iOS it’s very simple:

Image.file(
            File(widget.pickedFile.path),
            fit: BoxFit.scaleDown,
          )

(see also How to Save set image of PickedFile type to a image in Flutter?).

However, for Web, the class File isn’t supported.
How do I present the user with an Image on Web?

Solution

Without trying it personally, I suspect that PickedFile is a list of bytes.

Image has another constructor Image.memory() so my first suggestion is:

Uint8List pickedFileBytes = await widget.pickedFile.readAsBytes(); 
Image.memory(pickedFileBytes, fit: BoxFit.scaleDown);

Answered By – Chris Reynolds

Answer Checked By – Willingham (FlutterFixes Volunteer)