Flutter Image / Video Picker — Flutter

Hello All Flutter Developers

All of you know that flutter 1.22 has release and supports many new widgets. To know more what added release notes here

Today we are gonna see how to use image_picker plugin to get Image & Video file from Gallery & Camera

Here how it the flow will

1. Add image_picker plugin in pubspec.yaml
2. Add Requied Permissions if any
3. Call ImagePicker.pick* and this will return you a file
4. Display your file or perform the action you needed.

So lets get started

Adding Depedencies

Adding Permissions

As the plugins specified you dont need to any permission for android but for iOS we need to specify some permissions

Add the following keys to your Info.plist file, located in /ios/Runner/Info.plist:

NSPhotoLibraryUsageDescription — describe why your app needs permission for the photo library. This is called Privacy — Photo Library Usage Description in the visual editor. NSCameraUsageDescription — describe why your app needs access to the camera. This is called Privacy — Camera Usage Description in the visual editor. NSMicrophoneUsageDescription — describe why your app needs access to the microphone, if you intend to record videos. This is called Privacy — Microphone Usage Description in the visual editor.

We are done with the permission.

Calling Plugin

Inorder to pick an image from gallery

We use a method provided by the plugin i.e., ImagePicker().getImage which accepts multiple parameters

source: This can be ImageSource.gallery or ImageSource.camera

imageQuality: This will speciy at what quality you want the file to be, this property accepts double from 0 to 100 For example if your file is to big then we might get error when displaying the image so it better to use imageQuality

maxWidth: What is the maximum width you want the image to be

maxHeight: What is the maximum Height you want the image to be

preferredCameraDevice : which allow to set which camera you want to use

If specified, the image will be at most maxWidth wide and maxHeight tall. Otherwise the image will be returned at it's original width and height.

Inorder to pick an image from camera

Here we got a functions where we can call the funciton and get the image now where to call it and how to display image

Now we have got how to pick an Image from Gallery and Camera by a single line of Code.

image picker demo

Let’s see how to pick the video from Gallery and Camera

The only change we can see from Picking image and video is getVideo insted of getImage

ImagePicker().getVideo accepts only one property i.e., source than can ImageSource.gallery or ImageSource.camera

Inorder to display and play a video we need to depend on third party becuse Flutter doesn’t support video playback by default

So for Displaing videos we use video_player plugin

Add this dependency in pubspec.yaml

Now the below function will call the plugin to pick a video file and returns us a File or null

If source is specified as ImageSource.gallery It is promprt you to pick from gallery

If source is specified as ImageSource.camera It is promprt you to pick from Camera

Inorder to play a video we are using video_player plugin this plugin needs VideoPlayerController.

Above code we have already written in the _pickVideo() and _pickVideoFromCamera() functions

This piece of code will first sets that we are playing video from a file and then we call initialize once the initialize is done then we cann the setState(() {}) and then we start playing the video by using _controller.play()

We also have VideoPlayerController.file to play video from a file VideoPlayerController.asset to play video from a assets VideoPlayerController.network to play video from a Network

Above piece of code we will use AspectRatio resize the widget according to the video size.

We call _pickImage, _pickVideo methods whenever we press a button

video picker demo

This is how we pick an Image or Video from gallery or camera

You can get the Source code here

Thanks for your time.

Hope you like it, if yes clap & share.