Flutter Image and Video Picker

# Image / Video Picker — Flutter

Hello All Flutter Developers

All of you know that flutter 1.9 has release and supports many new widgets. To know more what added [release notes here](https://github.com/flutter/flutter/wiki/Release-Notes-Flutter-1.9.1)

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

https://gist.github.com/f312bc5e76861d90a60e98506bd1fe81

## 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 <project root>/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.

https://gist.github.com/dfa3e40c256019cb7562c5e3e5310425

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.pickImage` 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

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.

https://gist.github.com/086eb85ec69e46c42d5d140cd4863aa9

Inorder to pick an image from camera

https://gist.github.com/bdb9e032984cb51e8c003569b40119f8

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

https://gist.github.com/eb57569a27a1e503b5a07027b33383f1

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

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

The only change we can see from Picking image and video is `pickVideo` insted of `pickImage`

`ImagePicker.pickVideo` 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`

https://gist.github.com/e37c7f8d77d0289c3d26553359aca31e

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

https://gist.github.com/05e78d7a7b69e43b76682546e15e738c

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


https://gist.github.com/7c25d807fa07598b2adaaa0889e1d464

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

https://gist.github.com/54c27304e19a2908767ac58e1baf1b12

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


https://gist.github.com/ed8b60d5f20a7130680fc96f2e5c4a75

https://gist.github.com/31b622360c861ad1a96640ae0dba19c7

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

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

You can get the [Source code here](https://github.com/PonnamKarthik/FlutterImageVideoPickerDemo)

**Thanks for your time.**

<a href="https://www.buymeacoffee.com/EX7G1VjOu" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: auto !important;width: auto !important;" ></a>

Hope you like it, if yes **clap & share.**