Flutter Image Picker is a collection of widgets and tools for easily picking images and videos from the user’s device gallery or camera. It provides a seamless way to retrieve photos and videos from the user’s device without having to write platform-specific code. This plugin provides the functionality to select and take photos and videos from the user’s device, crop images, and also preview the selected media files. It supports both iOS and Android platforms and integrates well with other Flutter packages. The plugin is highly customizable and allows for customization of the preview of the selected media files. Its API is concise, secure and easy to use, making it an excellent choice for developers whose projects require media storage functionality. Flutter Image Picker is a really efficient package to easily access and work with media files in Flutter projects.
In mobile app development, image picker is an essential tool that allows users to select and upload photos, videos or other files directly from their device’s camera or gallery. It’s important because visual content plays a significant role in enhancing user engagement and experience in various aspects of mobile apps like social media, ecommerce, or travel. Without an image picker, developers would have to resort to building a custom solution which would require more time and resources. Moreover, it’s a common feature that users expect in any mobile application. Image picker is crucial to streamline the process of uploading images in the app and boosts engagement, ultimately enhancing the overall user experience.
Flutter Image Picker is a fantastic tool that offers a wide range of benefits for developers. Firstly, it is highly flexible and easy to use, allowing developers to integrate it into their projects with ease. Additionally, it offers a seamless user experience, allowing users to browse through their gallery, select an image and crop it if needed. Moreover, it also supports video selection and configuration of several parameters, such as quality, format, and dimensions. Lastly, Flutter Image Picker is highly stable, and developers can rely on it to perform effectively under various scenarios, making it a valuable asset for building reliable mobile apps. Overall, Flutter Image Picker is a highly versatile and user-friendly library for developers looking to integrate image and video selection features in their Flutter app. Copy to editor
Table of Contents
Getting Started with Flutter Image Picker
Installing Flutter Image Picker is a simple process that can be done in just a few steps. Here’s how to install Flutter Image Picker in your Flutter project:
Configure:
iOS
Add the NSPhotoLibraryUsageDescription, NSCameraUsageDescription, NSMicrophoneUsageDescription to your Info.plist file, located in < project root>/ios/Runner/Info.plist as shown above.
<dict>
.
.
<key>NSPhotoLibraryUsageDescription</key>
<string>Upload images for screen background</string>
<key>NSCameraUsageDescription</key>
<string>Upload image from camera for screen background</string>
<key>NSMicrophoneUsageDescription</key>
<string>Post videos to profile</string>
.
.
</dict>- 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.
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
<application
android:requestLegacyExternalStorage="true"
android:name="io.flutter.app.FlutterApplication"
android:label="xxxxxx"
android:icon="@mipmap/launcher_icon">
<activity>
...
...
</activity>
</application>Step 1: Add the Plugin to your pubspec.yaml file
To use Flutter Image Picker, you need to add it as a dependency to your project’s pubspec.yaml file. Open your pubspec.yaml file and add the following line under the dependencies section:
dependencies:
flutter:
sdk: flutter
image_picker: ^0.8.4+2
The image_picker package is the Flutter plugin for Image Picker, and the version number specified in the above example indicates the latest stable version at the time of writing.
Step 2: Run flutter pub get
After adding the image_picker dependency to your pubspec.yaml file, run the flutter pub get command to download and install the plugin.
Step 3: Import the Plugin
To use Flutter Image Picker in your code, you need to import the plugin. Open the Dart file where you want to use Flutter Image Picker and add the following import statement at the beginning of the file:
import 'package:image_picker/image_picker.dart';This statement imports the necessary classes and functions from the image_picker plugin.
Step 4: Use Flutter Image Picker in your Code
You can now use Flutter Image Picker in your code to select images from the device’s gallery or camera. Here’s an example of how to use Flutter Image Picker to select an image from the gallery and camera:
Pick Image From Gallery
_pickImageFromGallery() async {
PickedFile pickedFile = await ImagePicker().getImage(
source: ImageSource.gallery,
maxWidth: 1800,
maxHeight: 1800,
);
if (pickedFile != null) {
File imageFile = File(pickedFile.path);
}
}NOTE: 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. _pickImageFromGallery() 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
/// Get from camera
_pickImageFromCamera() async {
PickedFile pickedFile = await ImagePicker().getImage(
source: ImageSource.camera,
maxWidth: 1800,
maxHeight: 1800,
);
if (pickedFile != null) {
File imageFile = File(pickedFile.path);
}
}_pickImageFromCamera() 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
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
class MyPage extends StatefulWidget {
@override
_MyPageState createState() => _MyPageState();
}
class _MyPageState extends State<MyPage> {
/// Variables
File imageFile;
/// Widget
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Image Picker"),
),
body: Container(
child: imageFile == null
? Container(
alignment: Alignment.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
color: Colors.red,
onPressed: () {
_pickImage
FromGallery();
},
child: Text("PICK IMAGE FROM GALLERY"),
),
Container(
height: 40.0,
),
RaisedButton(
color: Colors.green,
onPressed: () {
_pickImageFromCamera();
},
child: Text("PICK IMAGE FROM CAMERA"),
)
],
),
): Container(
child: Image.file(
imageFile,
fit: BoxFit.cover,
),
)));
}
/// Get image from Gallery
_pickImage
FromGallery() async {
PickedFile pickedFile = await ImagePicker().getImage(
source: ImageSource.gallery,
maxWidth: 1800,
maxHeight: 1800,
);
if (pickedFile != null) {
setState(() {
imageFile = File(pickedFile.path);
});
}
}
/// Get image from Camera
_pickImageFromCamera() async {
PickedFile pickedFile = await ImagePicker().getImage(
source: ImageSource.camera,
maxWidth: 1800,
maxHeight: 1800,
);
if (pickedFile != null) {
setState(() {
imageFile = File(pickedFile.path);
});
}
}
}Related: queries: how to pick image in flutter,
