Capturing Photos Using the Camera in Flutter

Bring your camera into your app

Mohammad Azam
Dec 18, 2019 · 4 min read
Photo by ShareGrid on Unsplash

In the last post, I discussed how to select an image from the photo library using the Image Picker package in Flutter. It worked great and we were able to display the image in our application.

In this final part, I will demonstrate how you can capture a photo using the phone’s camera and display it on the screen. It is highly recommended that you read the first part because a lot of configuration and permission requests were discussed in the earlier post.


Getting Started

The first step is to install the camera plugin. The camera plugin will allow us to use the physical camera on the device and capture photos. Start by adding camera dependency to the pubspec.yaml file as shown in the implementation below:

Next, we need to update the _showOptions method to take into account when the user selects Take a Picture from Camera option. The implementation is shown below:

The _showCamera method is responsible for getting access to the available cameras and then taking the user to a separate view to preview the photo. The first camera is going to be the back-facing camera.

Currently, the TakePicturePage does not exist. The TakePicturePage will be responsible for allowing the user to capture the photo using their camera. In the next section, you will learn how to show the camera preview to the user and then send the captured photo back to the HomePage so it can be displayed on the screen.


Capturing a Photo from the Camera

When the user selects the camera option they are taken to the TakePicturePage. The TakePicturePage is going to allow them to preview the picture and then capture on tap of the button.

The TakePicturePage uses the CameraController to take the picture. CameraController is also used to set up and configure the preview. The initialization of the TakePicturePage widget is shown below:

The camera is the required argument in order to create the TakePicturePage widget. TakePicturePage is also a stateful widget and consists of the initState method which is responsible for initializing the camera controller.

The next step is to preview the camera. For this to work you can either run the app on a physical device or Android emulator. Please note that previewing and taking a picture will not work on iOS simulator.

The implementation for previewing the camera view is shown below:

We used the FutureBuilder to evaluate the _intializeCameraControllerFuture and later used the CameraView to display the preview of the camera. If the Future is still resolving then we show a CircularProgressIndicator() instead of the CameraPreview widget.

The result is shown below:

Android emulator fake room to test camera capture

Android uses fake room emulation so users can test out taking pictures using emulators without having to install the app on a real physical device.

Always, always, always make sure to run the app on a physical device before deploying it to the production

The final step is to take the picture. We added a FloatingButton as a second child to our Stack. The button will be responsible for capturing the photo. When the button is tapped, _takePicture method is fired. The implementation of the _takePicture method is shown below:

First, we wait for the _initializeCameraControllerFuture to resolve. Once, the future has been resolved we get the path to the temporary directory where the image will be saved. Finally, we call the takePicture function on the _cameraController instance which takes the picture and saves it to a specific path. After taking the picture we pop the page from the stack and sends back the path by passing it as a second argument to the Navigator.pop method. This means that the caller can now get access to the path and use it to display the recently captured photo.

Back in the HomePage widget we get back the path from the Navigator and set the state as shown below:

Since, we are setting the value of _path inside the setState closure this will cause the build function to get triggered, which in turn will display the captured image. The implementation of the build function is shown below:

The result is shown below:

Taking a picture using camera package

In this post, you learned how to capture image from the physical device and display it on the page. I encourage you to download the code and run the app on a device and give it a spin.

GitHub

Happy coding!

Better Programming

Advice for programmers.

Mohammad Azam

Written by

iOS Developer, speaker and educator. Top Udemy and LinkedIn instructor. Lead instructor at DigitalCrafts. https://www.udemy.com/user/mohammad-azam-2/

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade