Let's pick some images with Flutter
Tags: flutter, dart
Published: 2019-09-05 22:29:35

In this short post I wan to share with you how to pick images in Flutter using the Flutter team plugin.

We are going to use the `image_picker` package that was made by the Flutter team (it means that we have full support and its support both platforms Android and iOS) keep reading...


1. Add the `image_picker` package in the pubspec.yaml:

```dart
dependencies:
  image_picker: ^0.6.1+4
```

2. Import the package.

```dart
import 'package:image_picker/image_picker.dart';
```


Basically what we need to do is to choose the image source (Camera or Gallery) and pass it into the `ImagePicker.pickImage()`'s function. It is recommended to provide to your users the ability to choose where they want to pick from.

So let's create a property that will store the picked image:

```dart
File _pickedImage;
```

The next step is to show a dialog with a title and two buttons, one to pick images from Camera and other to pick images from Gallery. When the user tap one of the buttons we need to return the image source and we do this by pop with a result (`Navigator.pop(context, ImageSource.camera)`).

```dart
final imageSource = await showDialog<ImageSource>(
    context: context,
    builder: (context) =>
        AlertDialog(
          title: Text("Select the image source"),
          actions: <Widget>[
            MaterialButton(
              child: Text("Camera"),
              onPressed: () => Navigator.pop(context, ImageSource.camera),
            ),
            MaterialButton(
              child: Text("Gallery"),
              onPressed: () => Navigator.pop(context, ImageSource.gallery),
            )
          ],
        )
);
```

Now that we have the image source selected by the user we must call the `pickImage` function that will show the gallery/came to get the image.

```dart
if(imageSource != null) {
  final file = await ImagePicker.pickImage(source: imageSource);
  if(file != null) {
    setState(() => _pickedImage = file);
  }
}
```

Here we check if the user have selected one image source by clicking in one of the dialog's buttons by checking if imageSource is not null if it is not null then we use the library to get the image. The `pickImage` will return the picked image file or null if the user does not select any images.

Note: This library already request for permissions for the latest android versions you don't need to worry about that.

Here is the complete function's code:

```dart
void _pickImage() async {
  final imageSource = await showDialog<ImageSource>(
      context: context,
      builder: (context) =>
          AlertDialog(
            title: Text("Select the image source"),
            actions: <Widget>[
              MaterialButton(
                child: Text("Camera"),
                onPressed: () => Navigator.pop(context, ImageSource.camera),
              ),
              MaterialButton(
                child: Text("Gallery"),
                onPressed: () => Navigator.pop(context, ImageSource.gallery),
              )
            ],
          )
  );

  if(imageSource != null) {
    final file = await ImagePicker.pickImage(source: imageSource);
    if(file != null) {
      setState(() => _pickedImage = file);
    }
  }
}
```

Lets show our image.

```dart
Center(
  child: _pickedImage == null ?
  Text("No Image") :
  Image(image: FileImage(_pickedImage)),
)
```

And that is it for images...


### What about Videos?

This library also support picking videos. All that you need to do is to call `ImagePicker.pickVideo(source_here)`. The source is the same as the `pickImage` function. 

In case that you use `pickVideo` just make sure to not use the `Image` widget as it is just to display images. You can use [video_palyer](https://pub.dev/packages/video_player) plugin to play videos.

Find the complete code i [this repository](https://github.com/pedromassango/image_picker_example).

I hope you enjoy the article. See you in the next one.