Flutter Camera App

By Posted on

We are going to make a Flutter camera app. We will access camera API to overlay preview in full screen widget. The app will need a permission to access camera device. You can then able to extend functionality such as flash, camera orientation, camera focus and capture frame and access image in image picker. This app will use camera plugin and get native access to open camera.

You can access camera package detail information here: https://pub.dartlang.org/packages/camera.

First, create new Flutter project and add camera plugin as package dependency in pubspec.yaml file. 

dependencies:  flutter:    sdk: flutter  camera:

And then push “Package get” to download the dependencies.

You will need to add these permission in iOS to the ios/Runner/Info.plist:

<key>NSCameraUsageDescription</key><string>Can I use the camera please?</string><key>NSMicrophoneUsageDescription</key><string>Can I use the mic please?</string>

In Android, you need to set the minimum Android SDK version to 21. Edit the android/app/build.gradle and change to:

minSdkVersion 21

Edit main.dart and replace with initial script below:

import 'package:flutter/material.dart';class CameraApp extends StatefulWidget {  @override  _CameraAppState createState() => _CameraAppState();}class _CameraAppState extends State<CameraApp> {  @override  Widget build(BuildContext context) {  }  }

import the camera package:

import 'dart:async';import 'package:camera/camera.dart';import 'package:flutter/material.dart';

The first line is to let our app runs in asynchronous operations and prevent the entire program freezes.

Add list variable to hold our available cameras:

List<CameraDescription> cameras;

Create asynchronous function to populate cameras.

Future<void> main() async {  cameras = await availableCameras();  runApp(CameraApp());}

We need to select available camera from a list of available cameras in _CameraAppState class:

  CameraController controller;  @override  void initState() {    super.initState();    controller = CameraController(cameras[0], ResolutionPreset.medium);    controller.initialize().then((_) {      if (!mounted) {        return;      }      setState(() {});    });  }

We select camera id 0 and pass it to our camera preview layout. Edit build widget:

  @override  Widget build(BuildContext context) {    if (!controller.value.isInitialized) {      return Container();    }    return AspectRatio(        aspectRatio:        controller.value.aspectRatio,        child: CameraPreview(controller));  }

Lastly, we need to release the camera resources so other app can use the camera again.

@overridevoid dispose() {  controller?.dispose();  super.dispose();}

Try to run your app. And debug it with your Android or iOS device. You will see a full screen preview from your camera.

Flutter camera app example

That’s it. This tutorial show you how to easily access camera device. You can then extend it to your needs.

Related posts: