Flutter Image Picker : How to pick image from Gallery or Camera and Display it?
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.
Add the NSPhotoLibraryUsageDescription, NSCameraUsageDescription, NSMicrophoneUsageDescription to your Info.plist file, located in < project root>/ios/Runner/Info.plist as shown above.
- NSPhotoLibraryUsageDescription - Why app needs gallery access?
- NSCameraUsageDescription - Why app needs access to camera?
- 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.
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:
- source - Source can be ImageSource.gallery or ImageSource.camera
- maxWidth - Resizes the image value if width of the image is larger than the value
- 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.
Pick and Crop image from Gallery in Flutter
Step by step guide on how to pick and crop an image from gallery in Flutter
How to compress an image in Flutter?
Step by step guide on how to compress an image in Flutter
Polygon clipper in Flutter
A guide on how to clip images in various polygon shapes using polygon_clipper in Flutter