Camera Implementation in Flutter

2 min readMar 24, 2023

Implementing camera functionality in Flutter can be done using the camera plugin.

Features:

Display live camera preview in a widget.
Snapshots can be captured and saved to a file.
Record video.
Add access to the image stream from Dart.

Android:

minSdkVersion 21

IOS:

Add two rows to the ios/Runner/Info.plist:

one with the key Privacy - Camera Usage Description and a usage description.
and one with the key Privacy - Microphone Usage Description and a usage description.

Info.plist file:

<key>NSCameraUsageDescription</key>
<string>your usage description here</string>
<key>NSMicrophoneUsageDescription</key>
<string>your usage description here</string>

Install Package:

dependencies:
  camera: ^0.10.0+1

Get Available Camera

import 'package:camera/camera.dart';
import 'package:camera_app/view/camera_view.dart';
import 'package:flutter/material.dart';

late List<CameraDescription> cameras;

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  cameras = await availableCameras();
  runApp(const MyApp());
}

Camera Controller


class CameraView extends StatefulWidget {
  const CameraView({super.key});

  @override
  State<CameraView> createState() => _CameraViewState();
}

class _CameraViewState extends State<CameraView> {
  late CameraController _cameraController;

  @override
  void initState() {
    super.initState();
    _cameraController = CameraController(cameras[0], ResolutionPreset.max);
    _cameraController.initialize().then((_) {
      if (!mounted) {
        return;
      }
      setState(() {});
    }).catchError((Object e) {
      if (e is CameraException) {
        switch (e.code) {
          case 'CameraAccessDenied':
            print('Access was desnied');
            break;
          default:
            print(e.description);
            break;
        }
      }
    });
  }

  @override
  Widget build(BuildContext context) {

Display Camera Preview:

 Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          SizedBox(
            height: double.infinity,
            child: CameraPreview(_cameraController),
          ),

Capture an Image:

Positioned(
            bottom: 10,
            left: MediaQuery.of(context).size.width / 2.7,
            child: MaterialButton(
              onPressed: () async {
                if (!_cameraController.value.isInitialized) {
                  return;
                }
                if (_cameraController.value.isTakingPicture) {
                  return;
                }

                try {
                  await _cameraController.setFlashMode(FlashMode.auto);
                  XFile picture = await _cameraController.takePicture();
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => GalleryView(file: picture)));
                } on CameraException catch (e) {
                  debugPrint('Something went wrong! $e');
                  return;
                }
              },

Complete CameraView Code:

import 'package:camera/camera.dart';
import 'package:camera_app/main.dart';
import 'package:camera_app/view/gallery_view.dart';
import 'package:flutter/material.dart';

class CameraView extends StatefulWidget {
  const CameraView({super.key});

  @override
  State<CameraView> createState() => _CameraViewState();
}

class _CameraViewState extends State<CameraView> {
  late CameraController _cameraController;

  @override
  void initState() {
    super.initState();
    _cameraController = CameraController(cameras[0], ResolutionPreset.max);
    _cameraController.initialize().then((_) {
      if (!mounted) {
        return;
      }
      setState(() {});
    }).catchError((Object e) {
      if (e is CameraException) {
        switch (e.code) {
          case 'CameraAccessDenied':
            print('Access was desnied');
            break;
          default:
            print(e.description);
            break;
        }
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          SizedBox(
            height: double.infinity,
            child: CameraPreview(_cameraController),
          ),
          Positioned(
            bottom: 10,
            left: MediaQuery.of(context).size.width / 2.7,
            child: MaterialButton(
              onPressed: () async {
                if (!_cameraController.value.isInitialized) {
                  return;
                }
                if (_cameraController.value.isTakingPicture) {
                  return;
                }

                try {
                  await _cameraController.setFlashMode(FlashMode.auto);
                  XFile picture = await _cameraController.takePicture();
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => GalleryView(file: picture)));
                } on CameraException catch (e) {
                  debugPrint('Something went wrong! $e');
                  return;
                }
              },
              child: const Text(
                // "⚪",
                "📸",
                style: TextStyle(fontSize: 50),
              ),
            ),
          )
        ],
      ),
    );
  }
}

Complete GalleryView Code:

Display captured Image:

import 'dart:io';

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

class GalleryView extends StatefulWidget {
  GalleryView({super.key, required this.file});
  XFile file;

  @override
  State<GalleryView> createState() => _GalleryViewState();
}

class _GalleryViewState extends State<GalleryView> {
  @override
  Widget build(BuildContext context) {
    File picture = File(widget.file.path);
    return Scaffold(
      appBar: AppBar(
        title: const Text('Gallery'),
        backgroundColor: Colors.teal,
      ),
      body: Center(
        child: Image.file(picture),
      ),
    );
  }
}

For web integration details, see the camera_web package.

I hope this article was helpful to you. Thank you for taking the time to read it. Your feedback and suggestions are always welcome.