Displaying Photos From Your Photo Library in Flutter Applications
Introduce beautiful images to your Flutter app
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.
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:
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:
_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:
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:
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:
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:
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!