Displaying Photos From Your Photo Library in Flutter Applications

Introduce beautiful images to your Flutter app

Mohammad Azam
Dec 18, 2019 · 4 min read
Photo by Alexander Andrews on Unsplash

Believe it or not, most people buy smartphones so they can take amazing photos of their cats, dogs, and kids too. Both iOS and Android platforms provide tons of different libraries for taking photos.

Flutter is no different, there are several packages available for capturing photos from the camera or picking photos from the photo library.

In this post, I will cover how to display a photo in a Flutter app from a photo library using the Image Picker package.


Getting Started

Before adding any extra packages to integrate with the photo library, we need to build a basic user interface that will allow users to preview the picture from the camera or the photo library.

The implementation below creates a basic interface to fulfill our needs.

The result is shown below:

User Interface for the app

We have used this beautiful downtown Houston image as our place holder image for the app.

The button “Take Picture” should present the user with options for either taking the picture from the camera or selecting it from the photo library. The implementation of the button onTap code is shown below:

The _showOptions method displays a bottom modal sheet, which consists of two options. They can either take a picture from their camera or they can select a picture from the photo library. This is shown in the animation below:

Bottom modal sheet

This is great! In the next section, we are going to install the required packages and get started with selecting photos from the photo library.


Selecting Photos From the Photo Library

The Image Picker package in Flutter allows the user to pick an image from the photo library. Image Picker also allows the user to capture a photo using the camera but for that, we will use a different package.

Start by installing the Image Picker package by adding it to the pubspec.yaml file as shown below:

Next, you will have to configure the permissions, which are required for the iOS platform. Open the info.plist file located in the iOS>Runner folder and add the following keys and values.

The Image Picker will be presented when the user selects the Choose from Photo Library option from the bottom sheet widget. The _showPhotoLibrary method is implemented below:

That’s it! When you run the app and tap on the Choose from Photo Library option, it will trigger the _showPhotoLibrary method which is going to launch the photo library. This is shown below:

Presenting the photo library

Looking great!

We still need to replace our place holder image and display the selected image in its place.

The Image Picker allows us to get access to the File object associated with the image. The File object has a path property that contains the path of the image. The path for the above image is shown below:

/Users/azamsharp/Library/Developer/CoreSimulator/Devices/5091AD3A-FCFF-4C0D-B3E2–984BE1CC757C/data/Containers/Data/Application/922A8DFF-D441–48A4-A0C7-BABCCC37E502/tmp/image_picker_061D8B5D-4BF8–4B11-B739–85410C14C4E0–12357–0000E8DRAFA1C474.jpg

In order to persist the path, we need to save it in the state. This will require changing our widget from stateless to stateful and exposing a _path property as shown in the implementation below:

Now, when the ImagePicker returns the new path, it is assigned to the _path property inside the setState closure. This triggers the build method where we can update the Image widget as shown below:

The result is shown below:

Selecting photo from photo library

Some of you might have noticed that the bottom sheet does not close once the photo is selected. The implementation below takes care of that problem and pops up the bottom sheet view using the Navigator.

That’s it! This was the first part of a two-part series post. In the next post, you will learn how to integrate the phone camera and display the captured photo in the view.

Thanks and happy coding!

Better Programming

Advice for programmers.

Mohammad Azam

Written by

iOS Developer, speaker and educator. Top Udemy and LinkedIn instructor. Lead instructor at DigitalCrafts. https://www.udemy.com/user/mohammad-azam-2/

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade