Capturing Photos Using the Camera in Flutter
Bring your camera into your app
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.
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 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:
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.
Displaying Photos From Your Photo Library in Flutter Applications
Introduce beautiful images to your Flutter app