Hello, the second post in our package of the week series is about handling image files in our projects. And our package is image_picker. This package is one of the most common tools used by application developers, because it is a very common need for an application to select photos or videos from users’ devices.
What’s it for?
Image Picker lets you grab media files from the device’s gallery or directly from the camera, essentially making it easier for users to select photos or videos. Let’s say you’re making a profile photo add screen, you want to allow the user to select an image from the gallery or take a photo on the fly. With this package, that can be done with a few lines of code.
How to Use?
First you add the package to your pubspec.yaml file using the command below as usual:
flutter pub add image_pickerdependencies:
image_picker: ^1.1.2 //version number may varyThen you need to import the package to the dart file you will use with the following line:
import 'package:image_picker/image_picker.dart';As far as permits are concerned,
As of version 0.8.1 the Android app supports selecting (multiple) images on Android 4.3 or higher. So no configuration is required — the plugin should work out of the box.
But on iOS you need to add the following lines to the Info.plist file:
<key>NSCameraUsageDescription</key>
<string>We need access to your camera to take photos.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>We need access to your photo library to select photos.</string>Now comes the fun part. The package provides an ImagePicker class that allows you to easily pick images from the gallery or camera. Here’s a simple example of how to use it:
final ImagePicker _picker = ImagePicker();
// Galeriden resim seçmek
final XFile? image = await _picker.pickImage(source: ImageSource.gallery);
// Kameradan resim çekmek
final XFile? photo = await _picker.pickImage(source: ImageSource.camera);In the code above, if the user selects an image from the gallery, the file path is assigned to the image variable. Likewise, if you want to use the camera, you can take a shot from the camera with the ImageSource.camera parameter.
It is also possible to select a video in the same way:
final XFile? video = await _picker.pickVideo(source: ImageSource.gallery);Furthermore, this package offers options to compress both photos and videos. This is a great feature, especially for optimizing large file sizes!
Now let’s see what customizations we can make using this package.
In Image Picker, you can also set resolution settings to control the size and quality of the media files that users upload. For example, if you want to take a low-resolution photo when using the camera, you can set the imageQuality parameter.
final XFile? compressedPhoto = await _picker.pickImage(
source: ImageSource.camera,
imageQuality: 50, // 50% quality
);This way, you can also preserve the performance of the application. Low-sized images will load faster, especially if you are uploading media files over the internet.
You can also specify the size of the images with maxWidth, maxHeight and the preferredCameraDevice parameter for front or rear camera preference.
Below I am sharing an example of a project made using this package with all the codes.
!!! Since I created the project using iOS Simulator and there is no camera on the virtual device, the Camera button shows Error, but it works fine on the real device.
final ImagePicker _picker = ImagePicker();
Future pickImageFromGallery() async {
final XFile? image = await _picker.pickImage(source: ImageSource.gallery);
}
Future pickImageFromCamera() async {
final XFile? photo = await _picker.pickImage(source: ImageSource.camera);
}
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.purple,
padding: const EdgeInsets.all(16.0),
),
child: const Text("Pick Image from Gallery",
style: TextStyle(
color: Colors.white70, fontWeight: FontWeight.bold)),
onPressed: () {
pickImageFromGallery();
},
),
const SizedBox(
height: 22.0,
),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.purple,
padding: const EdgeInsets.all(16.0),
),
child: const Text("Pick Image from Camera",
style: TextStyle(
color: Colors.white70, fontWeight: FontWeight.bold)),
onPressed: () {
pickImageFromCamera();
},
),
],
),
),
I will conclude this article by talking about its advantages and disadvantages.
The biggest advantage of the ImagePicker package is that users can select media files from the gallery or camera with just a few lines of code. You can also control file size and quality.
On the downside, you may need to manage performance when working with large media files. And setting platform-specific permissions manually can be a bit cumbersome.
I hope you found this article useful! If you appreciate the information provided, you have the option to support me by Buying Me A Coffee! Your gesture would be greatly appreciated!
In a nutshell, Image Picker is one of the most popular packages for anyone who wants users to select media or use a camera in Flutter projects. If your app has features like profile photo, gallery selection, or video uploading, this package will give you a lot of peace of mind! It’s a simple and versatile solution.
I hope this was useful.
Happy coding.
Selin.
