Camera access in Flutter

Introduction

Camera access lets your app take pictures or record videos. It helps users capture moments directly inside your app.

You want users to take profile photos inside your app.

Your app needs to scan QR codes or barcodes using the camera.

You want to let users record videos for sharing or saving.

Your app offers augmented reality features that use the camera view.

You want to build a photo editing app that starts with a camera capture.

Syntax

Flutter

import 'package:camera/camera.dart';

// Initialize camera
final cameras = await availableCameras();
final firstCamera = cameras.first;

// Create controller
final controller = CameraController(
  firstCamera,
  ResolutionPreset.high,
);

await controller.initialize();

// Use controller to show preview or take picture

You must add camera package in pubspec.yaml to use camera features.

Always initialize the camera controller before using it.

Examples

This gets the list of available cameras and selects the first one (usually the back camera).

Flutter

final cameras = await availableCameras();
final camera = cameras.first;

Create a controller to manage the camera and initialize it before use.

Flutter

final controller = CameraController(camera, ResolutionPreset.medium);
await controller.initialize();

Take a picture using the initialized camera controller.

Flutter

await controller.takePicture();

Sample App

This app opens the device camera and shows a live preview. When you tap the camera button, it takes a picture and shows it in a popup.

Flutter

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final cameras = await availableCameras();
  final firstCamera = cameras.first;
  runApp(MyApp(camera: firstCamera));
}

class MyApp extends StatelessWidget {
  final CameraDescription camera;
  const MyApp({super.key, required this.camera});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CameraScreen(camera: camera),
    );
  }
}

class CameraScreen extends StatefulWidget {
  final CameraDescription camera;
  const CameraScreen({super.key, required this.camera});

  @override
  State<CameraScreen> createState() => _CameraScreenState();
}

class _CameraScreenState extends State<CameraScreen> {
  late CameraController _controller;
  late Future<void> _initializeControllerFuture;

  @override
  void initState() {
    super.initState();
    _controller = CameraController(
      widget.camera,
      ResolutionPreset.medium,
    );
    _initializeControllerFuture = _controller.initialize();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Camera Access Example')),
      body: FutureBuilder<void>(
        future: _initializeControllerFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            return CameraPreview(_controller);
          } else {
            return const Center(child: CircularProgressIndicator());
          }
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          try {
            await _initializeControllerFuture;
            final image = await _controller.takePicture();
            if (!mounted) return;
            await showDialog(
              context: context,
              builder: (_) => AlertDialog(
                content: Image.file(
                  File(image.path),
                  fit: BoxFit.cover,
                ),
              ),
            );
          } catch (e) {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('Error: $e')),
            );
          }
        },
        child: const Icon(Icons.camera_alt),
      ),
    );
  }
}

Important Notes

Remember to add camera permissions in your AndroidManifest.xml and Info.plist files.

Test camera features on a real device for best results.

Handle errors like camera not available or permission denied gracefully.

Summary

Camera access lets apps take pictures or videos inside the app.

Use the camera package to control the device camera in Flutter.

Always initialize the camera controller before showing preview or taking photos.

Practice

1. What is the main purpose of the camera package in Flutter?

easy

A. To manage app navigation between screens

B. To access and control the device camera for taking pictures or videos

C. To play audio files in the app

D. To handle user authentication

Solution

1. Step 1: Understand the package purpose

   The camera package is designed to access device cameras.

2. Step 2: Match purpose with options

   Only To access and control the device camera for taking pictures or videos describes camera control for pictures or videos.

3. Final Answer:

   To access and control the device camera for taking pictures or videos -> Option B

4. Quick Check:

   camera package = device camera access [OK]

Hint: Remember camera package controls device cameras only [OK]

Common Mistakes:

• Confusing camera package with audio or navigation packages
• Thinking it handles user login or authentication
• Assuming it manages app UI layout

2. Which of the following is the correct way to initialize a CameraController in Flutter?

easy

A. CameraController controller = CameraController(camera, ResolutionPreset.high);

B. CameraController controller = new CameraController();

C. CameraController controller = CameraController();

D. CameraController controller = CameraController(camera);

Solution

1. Step 1: Check CameraController constructor requirements

   The constructor requires a CameraDescription and a ResolutionPreset.

2. Step 2: Compare options with correct syntax

   CameraController controller = CameraController(camera, ResolutionPreset.high); correctly passes both parameters.

3. Final Answer:

   CameraController controller = CameraController(camera, ResolutionPreset.high); -> Option A

4. Quick Check:

   Controller needs camera and resolution [OK]

Hint: Always pass camera and resolution to CameraController [OK]

Common Mistakes:

• Omitting resolution preset parameter
• Using empty constructor without parameters
• Forgetting to import camera package

3. Given this Flutter code snippet, what will be the output on the screen?

final cameras = await availableCameras();
final controller = CameraController(cameras[0], ResolutionPreset.medium);
await controller.initialize();
return CameraPreview(controller);

medium

A. A static image from the camera

B. A blank screen with no camera preview

C. A live camera preview from the first available camera

D. An error because controller is not initialized

Solution

1. Step 1: Analyze camera initialization

   The code gets available cameras, creates a controller for the first camera, and initializes it.

2. Step 2: Understand CameraPreview behavior

   After initialization, CameraPreview shows live feed from the camera controller.

3. Final Answer:

   A live camera preview from the first available camera -> Option C

4. Quick Check:

   Initialized controller + CameraPreview = live feed [OK]

Hint: Initialized controller + CameraPreview shows live feed [OK]

Common Mistakes:

• Assuming preview shows static image
• Forgetting to await controller.initialize()
• Thinking preview shows blank without error

4. What is wrong with this Flutter code snippet for camera usage?

final cameras = await availableCameras();
final controller = CameraController(cameras[0], ResolutionPreset.high);
return CameraPreview(controller);

medium

A. The controller is not initialized before use

B. The camera list is empty

C. ResolutionPreset.high is invalid

D. CameraPreview requires a widget key

Solution

1. Step 1: Check controller initialization

   The code creates the controller but does not call initialize() or await it.

2. Step 2: Understand CameraPreview requirements

   CameraPreview needs an initialized controller to display the camera feed properly.

3. Final Answer:

   The controller is not initialized before use -> Option A

4. Quick Check:

   Controller must be initialized before preview [OK]

Hint: Always await controller.initialize() before CameraPreview [OK]

Common Mistakes:

• Skipping controller.initialize() call
• Assuming CameraPreview works without initialization
• Confusing resolution presets with initialization

5. You want to build a Flutter app that takes a picture when a button is pressed and saves it to a file. Which sequence of steps is correct?

hard

A. Call takePicture() before initializing CameraController, then save file

B. Save file first, then initialize CameraController and call takePicture()

C. Show CameraPreview without initializing controller, then call takePicture()

D. Initialize CameraController, show CameraPreview, call takePicture(), save file

Solution

1. Step 1: Initialize and prepare camera

   First, create and initialize the CameraController to access the camera hardware.

2. Step 2: Show live preview and take picture

   Display CameraPreview so user sees camera feed, then call takePicture() on button press.

3. Step 3: Save the captured image file

   After taking picture, save the returned file to storage.

4. Final Answer:

   Initialize CameraController, show CameraPreview, call takePicture(), save file -> Option D

5. Quick Check:

   Init controller -> preview -> takePicture -> save [OK]

Hint: Initialize first, preview, then take and save picture [OK]

Common Mistakes:

• Calling takePicture before initialization
• Skipping preview and confusing flow
• Trying to save before taking picture