Image Picker Flutter

Elevate your Flutter app with the image_picker plugin, a versatile tool for importing images or videos from a device. This intuitive API returns an XFile object, seamlessly integrating picked media into your app's widget tree. Our article guides you through creating a photo editing app, starting with image picking.

Installation

Open pubspec.yaml and add the dependency for the plugin to install.

Now run flutter pub get in your project.

Android

Other than this, on the Android native side, there is no need to change anything in the code.

iOS

While there have been changes on the iOS side of the Image Picker Flutter plugin.

So from version 0.8.1, the plugin, image picker flutter, uses PHPicker to pick multiple images on iOS 14 and up. And as a result, it becomes impossible to pick HEIC images in Simulator with iOS 14+.

To work with this plugin, add these keys to the Info. plist file, located at project_name/ios/Runner/Info.plist.

1. NSPhotoLibraryUsageDescription:
   Describe the reason for requesting photo library permission.
2. NSCameraUsageDescription:
   Describe why you need camera permission in your app. Although you can skip adding this key to your project while building with this article since we only need gallery permission.
3. NSMicrophoneUsageDescription:
   Describe why your app needs microphone permission (for recording videos). We can skip this key also. Since we're not recording any video in this app.

Example of Flutter Image Picker App

Now that we have added the dependency, let's start coding. We need to add functionality to pick an image and display the selected image on the screen.

We have carefully added steps in TODO to achieve all the steps required to build an image picker in this project. There are 3 branches in the code:

1. start (where all the code resides when you first create the app)
2. editor (where all the code for creating the editor resides)
3. image_picker (this is where you start adding the image picker flutter library)

So check out the imagepicker branch and inside main.dart, Let's add the variable that will hold the photo for us.

We have used ValueNotifier here because we want to be notified when there is a change in the value.

Now let's create a class that will do the picking of an image and we will then use that data and display that image on our screen. The beauty of this plugin is that it offers image/video picking functionality to most platforms (ios, android, and web).

This is how it looks right now.

What are we Doing here?

1. We create a Stateful Widget named CustomImagePicker. And add a callback function to receive the selected image.
2. We then create a small box with the help of a SizedBox widget and add a small camera icon in the middle.
3. Now we want to pick an image from the gallery when we click on the icon. To do that we wrapped the SizedBox with GesureDetector to add this functionality.
4. Inside onTap, we create the instance for the Image Picker Flutter plugin and then ask for the image form gallery, while citing the source as ImageSource.gallery.
5. When we get the result, we check whether the user is on the same screen and whether the user has picked an image, we pass the result back to the callback using the widget.onImagePicked(image).

Once we're done with the image-picking part, we need to tell this screen that the image has been received and that we want to display that image. Since we record the image using a ValueNotifier, we want to create a function that will receive the image and update its value in the ValueNotifier.

This is the same function that we passed in the custom_image_picker.dart

Now that we have the function to receive the image in the main.dart, we want to show or hide the image depending on the _image variable.

For listening to the changes to ValueNotifier, we need ValueListanableBuilder. This builder will listen to changes in the file and change the resultant widget on the screen appropriately.

What are we Doing here?

1. We create a ValueListenableBuilder and provide it with the _image as valueListenable.
2. When the application starts, the xFile is supposed to be null. So a CustomImagePicker is shown. And we can click on the camera icon and select the image we want.
3. Once the image is selected inside custom_image_picker.dart, we get a callback in main.dart and the value of _image variable changes, and the builder function runs again with an xFile and we can then show that image as Image.file widget.

This is how the app looks when finished:

Migrating to 0.8.2+

From version 0.8.2, there have been changes in the Image Picker Flutter plugin. The breaking change is that while the plugin now returns an XFile instance from the cross_plugin package, earlier it used to return instances of PickedFile. Soon anyone using older methods will not be able to use those since they will be deprecated and removed eventually.

We have been using the new standard while writing the articles, so no change is required, but for developers looking to change in their projects, here are the changes: