Let's pick some images with Flutter

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:

dependencies:
  image_picker: ^0.6.1+4

1. Import the package.

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:

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)).

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.

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:

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.

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 plugin to play videos.

Find the complete code i this repository.

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