How to Use Camera Package in Flutter: Simple Guide

To use the camera package in Flutter, add it to your pubspec.yaml, request camera permissions, initialize available cameras, and use CameraController to display a live preview or capture photos. The package provides widgets and methods to control the camera and handle images easily.

Syntax

The camera package requires these main parts:

• CameraController: Controls the camera and manages preview and capture.
• initialize(): Prepares the camera asynchronously before use.
• CameraPreview widget: Shows the live camera feed on screen.
• takePicture(): Captures a photo and returns the image file.

dart

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

// To show preview:
CameraPreview(controller);

// To take picture:
final image = await controller.takePicture();

Example

This example shows a simple Flutter app that opens the first available camera, displays the live preview, and has a button to take a photo. The photo path is printed in the console.

dart

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

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

class MyApp extends StatelessWidget {
  final List<CameraDescription> cameras;
  MyApp({required this.cameras});

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

class CameraExample extends StatefulWidget {
  final List<CameraDescription> cameras;
  CameraExample({required this.cameras});

  @override
  _CameraExampleState createState() => _CameraExampleState();
}

class _CameraExampleState extends State<CameraExample> {
  late CameraController _controller;
  late Future<void> _initializeControllerFuture;

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Camera Example')),
      body: FutureBuilder<void>(
        future: _initializeControllerFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            return CameraPreview(_controller);
          } else {
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.camera_alt),
        onPressed: () async {
          try {
            await _initializeControllerFuture;
            final image = await _controller.takePicture();
            print('Picture saved to: ${image.path}');
          } catch (e) {
            print('Error: $e');
          }
        },
      ),
    );
  }
}

Output

App shows live camera preview with a floating button; tapping it captures a photo and prints the file path in the console.

Common Pitfalls

Common mistakes when using the camera package include:

• Not calling initialize() before using the controller, causing errors.
• Forgetting to dispose the CameraController, leading to memory leaks.
• Not handling camera permissions properly, so the app crashes or shows a blank screen.
• Trying to use the camera before availableCameras() completes.

Always await asynchronous calls and handle exceptions.

dart

/* Wrong: Using controller before initialize */
final controller = CameraController(cameras[0], ResolutionPreset.high);
// Missing await controller.initialize();
CameraPreview(controller); // This causes error

/* Right: */
await controller.initialize();
CameraPreview(controller);

Quick Reference

Tips for using the camera package:

• Always call await controller.initialize() before showing preview.
• Dispose the controller in dispose() method.
• Use availableCameras() to get cameras list.
• Handle permissions on Android and iOS (add to manifest and plist).
• Use CameraPreview(controller) widget to show live feed.
• Use takePicture() to capture images.

Key Takeaways

Add and initialize CameraController before using the camera preview or capture.

Always await asynchronous camera setup calls to avoid runtime errors.

Dispose CameraController to free resources when no longer needed.

Handle camera permissions properly on both Android and iOS platforms.

Use CameraPreview widget to display live camera feed in your app.