Scroll Top

Flutter Plugins : Implementing Camera for Pictures and Video

Getting your Trinity Audio player ready...

Flutter Plugins

Flutter is great with device-related functionalities and, in most cases, there are plugins available to handle different native device capabilities.

You will sometimes see different options for plugins and it becomes tricky to know which plugin is the most suitable for, and works most perfectly for your requirements. 

We had a requirement for camera functionality in one of our apps and of the plugins available, we used image_picker as it was easy to implement and seemed to work as per our requirements. It did work perfectly and we didn’t have any doubts about that before we had to go for a flutter upgrade.

For one of the other plugins(local_auth), we had to upgrade to the latest version(1.17), after which we started facing issues with image_picker and the application crashed every time we launched the camera.

We realised that it was using some deprecated methods and causing the app to crash. Flutter does provide you warnings, so make sure to check them instead of ignoring them as mere warnings.

This is when we picked up the camera plugin, which is the recommended plugin for using device cameras in the Flutter cookbook.

In this blog series, we will be sharing our project experiences with Flutter and how we implemented its plugins.

In the first blog of this series, we will explain how we can implement the camera plugin step-by-step to incorporate Picture and video capture capabilities of the device camera in a demo application.

Getting Started

Create a new Flutter app using the following-

Dependencies

Add the prerequisites in the pubspec.yaml which includes the camera plugin for the camera, path and path_provider to handle the file path to save the image/video files generated by the camera.

camera: ^0.5.8+2

path_provider: ^1.6.11

path: ^1.6.4

Change the minimum Android SDK version to 21 (or higher) in your android/app/build.gradle file.

minSdkVersion 21

If also handling iOS, include the below lines to the ios/Runner/Info.plist,

Building the Screens

Modify the main.dart to only launch our landing page of the application named LaunchScreen.

The launch screen will be a stateful widget for the intermediate screen to launch the camera and also show the pictures and videos taken by the camera in the form of a list of files.

Let’s create a widget with the name take_picture_page which will have the logic of the camera to capture pictures as well as video.

The camera controller will be initialised as follows.

The fileInit method is used for initialization of the file path for the video file as the same should be used to start and stop recording.

For image capture, the temporary file will be initialized before the image capture only.

For the view section, the entire body is within a Scaffold, with a Stack in order to get the other elements stacked over the camera view given by the CameraPreview(_cameraController). It is also complemented by a FloatingActionButton, on click of which the camera action is handled and invoked implemented by the _takePicture method. 

A bottom navigation bar is added to handle the picture and video in the same screen.

The state property _selectedIndex handles the bottom navigation bar selection between picture and video and accordingly is handled in the _takePicture method.

The state property _isRec is set to indicate if a recording is already in progress so that the same button can be used to start and stop recording.

The below code shows the complete stack returned within the Scaffold widget for the camera view. This can be designed and customized as per your requirement of the view.

Do not forget to dispose the camera controller, when you are done using it, as shown.

Using this plugin gives you the flexibility to further customize the camera view as per your requirement. 

The below screenshots shows the current camera view for pictures and video:

screenshots
You can find the complete git repository for the basic implementation here.

Conclusion

In this blog, we saw the steps to implement the camera plugin to implement the device camera functionality in your application and customize the picture and video capturing view as required. 

In the next blog of this series, we will explore some other Flutter plugin, share any challenges we faced while implementing it, and see how we finally implemented it.

Related Posts

Comments (1)

Really want´s to thank you.
Your work was great and really helped me. Specially the git repository.
Amazing work.

Congratulations from Brazil.

Leave a comment

Privacy Preferences
When you visit our website, it may store information through your browser from specific services, usually in form of cookies. Here you can change your privacy preferences. Please note that blocking some types of cookies may impact your experience on our website and the services we offer.