Sample Code for Displaying Device Images in Flutter

Tadashi Shigeoka ·  Sat, March 7, 2020

I’ll introduce sample code for displaying images from the device image gallery in Flutter.

Flutter

Prerequisites

Reference Information) Implementing Flutter Device Image Display

Based on the following articles from the Flutter official documentation and other sources, I implemented the functionality to display images from the device image gallery.

Using ImagePicker.pickImage(source: ImageSource.gallery)

The official documentation image_picker | Flutter Package includes sample code for displaying images taken with the camera as shown below, but it doesn’t describe how to display images from the Gallery.

var image = await ImagePicker.pickImage(source: ImageSource.camera);

Looking at the source code lib/image_picker.dart#L34-L35 · flutter/plugins, there’s a comment:

  /// The `source` argument controls where the image comes from. This can
  /// be either [ImageSource.camera] or [ImageSource.gallery].

This tells us we should use ImageSource.gallery.

var image = await ImagePicker.pickImage(source: ImageSource.gallery);

Flutter Device Image Display Sample Code

The sample code for displaying images from the device image gallery in a Flutter app is published in the following GitHub Pull Request, so please take a look.

👉 Display the image from gallery using image_picker · Pull Request #13 · codenote-net/flutter_sandbox

That’s all from the Gemba.