Taking and/or using pictures in Flutter apps using the image_picker package

You know the basics of Flutter programming, now it’s time to explain one of the most common and useful Flutter packages because the standard library isn’t enough for you anymore.

One of the packages I highlighted in my recent tour of the best Flutter packages on Pub is the image_picker package, which allows you to add an image selection dialog to a Flutter app.

For example, let’s suppose you want to have an app to showcase the best pictures you have taken, so you need to have two things: a screen to show the pictures and a dialog to add a picture, either by selecting an existing picture or by taking a picture.

What we’ll be building is an app that will look something like this:

These are the picture the Android emulator pretends to take when you use its camera. Very interesting.

Installing the image_picker package

Installation of a Flutter package is done in two steps: edit pubspec.yaml to include the dependency on image_picker:

And then run the

$ flutter packages get

command to actually download and install the package.

Building the showcase interface

The showcase interface will be composed of a ListView.builder that takes each element of a List we’ll be creating to store the Images that need to be shown and displays them separated by a Divider (a thin and padded horizontal line).

We’ll start building the app by importing both the Flutter standard Material library and the image_picker package in the main app code (main.dart file):

After doing that, we’ll need to write a main method to run a MaterialApp that will load a Stateful PictureShowcaseHome home page.

This is fairly basic Flutter programming, so it shouldn’t require further explanation in a guide like this aimed at the Flutter developer that already knows the basics and is looking into more advanced topics like packages.

For more basic tutorials, check out my Twitter @carminezacc.

The next step is to build a stateful home page for our app.

The StatefulWidget contains just the definition of some static data, while the state definition is where the fun stuff happens:

In the state definition we have a regular Scaffold with a simple AppBar and a ListView.builder (which is a scrollable list of dynamically built widgets) that displays, for each element of the imgs List, a Column (vertically stacked widgets) composed of the image we want to display and a Divider to divide it from the next image in the list.

The FloatingActionButton will be used for adding other images, but that’s what we will be implementing in the next paragraph

Using image_picker to implement picking

To set the onPressed attribute of the FAB, we need to take advantage of the image_picker package to take pictures using the camera (or the gallery).

If you wanted to add pictures from the camera, you would use the following code:

ImagePicker.pickImage() is the main method of the image_picker package: it is used to fire up the camera or the gallery picture picking dialog.

The source attribute can be one of either ImageSource.camera or ImageSource.gallery (depening on where you want to take the pictures from), which are the possible values of the enum ImageSource .

Then we call setState() to re-render the app while adding the newly picked image to the imgs List.

The complete code

The full code for this app is the following:

More Flutter stuff from me

I’m working on a Flutter book that covers both the basic, some intermediate concepts like this and some more advanced topics.

I (somewhat) regularly post tips, tricks, guides and posts, so make sure to follow me on Twitter at @carminezacc to be sure to stay updated on all of that.