FLUTTER

Flutter Image Picker : How to pick image from Gallery or Camera and Display it?

Contents

1. Install image_picker package

2. Configurations required for iOS and Android

3. Pick image from Gallery using ImagePicker().getImage - Example code

4. Pick image from Camera - Example code

5. Full Implementation

Images showing the implementation of this tutorial 1) Simple implementation of with width argument. 2) Implementation of BoxFit.cover as value of fit argument. 3) Implementation of network image as background of a container

This tutorial introduces you to image_picker package in Flutter. Image picker can be used to pick an image from the gallery of the phone.

Install image_picker package

Add the image_picker package to pubspec.yaml as shown above. Run flutter pub get to install the package.

Configure

iOS

Add the NSPhotoLibraryUsageDescription, NSCameraUsageDescription, NSMicrophoneUsageDescription to your Info.plist file, located in < project root>/ios/Runner/Info.plist as shown above.

1. NSPhotoLibraryUsageDescription - Why app needs gallery access?
2. NSCameraUsageDescription - Why app needs access to camera?
3. NSMicrophoneUsageDescription - Why app needs microphone access?

Even though you are not using camera or microphone, this should be added as these features are used by the package.

Android

On Android API 29+, no configuration is required. For API < 29, android:requestLegacyExternalStorage="true" as an attribute to the < application > tag in AndroidManifest.xml as shown in the below example

Pick Image From Gallery - Example code

PS : In earlier versions of image_picker ImagePicker.pickImage was used. This has deprected and you should use ImagePicker().getImage() instead.

Image picker can be used to pick image from gallery as well as camera. _getFromGallery() is our function picking the image from gallery. When the function is run for the first time in iOS, a gallery access permission pops up with the NSPhotoLibraryUsageDescription, you gave on Info.plist. Once the user gives permission he will be able to access images in the gallery from the app.

In this example we are using 3 properties:

1. source - Source can be ImageSource.gallery or ImageSource.camera
2. maxWidth - Resizes the image value if width of the image is larger than the value
3. maxHeight - Resizes the image if height of the image is larger than the value

Pick Image From Camera - Example code

_getFromCamera() is our function picking the image from camera. When the function is run for the first time in iOS, a camera access permission pops up with the NSCameraUsageDescription, you gave on Info.plist. Once the user gives permission he will be able to access camera.

Full Implementation