Document Camera Frame #

The DocumentCameraFrame package simplifies document scanning by providing a customizable camera interface for capturing and cropping document images. It’s ideal for applications that require efficient and user-friendly document capture.

Screenshot #

Features #

• Document Frame: Customizable dimensions for focused document capture.
• Camera Preview: Real-time camera feed for instant feedback.
• User-Friendly Controls:
  • Capture: Take a snapshot of the document.
  • Save: Save the captured image.
  • Retake: Retake the image if unsatisfactory.
• Customizable UI:
  • Define frame dimensions, button styles, and positions.
  • Add optional titles with alignment and padding options.
• Event Callbacks: Handle events like onCaptured, onSaved, and onRetake easily.

Installation #

Add the package to your Flutter project using:

flutter pub add document_camera_frame

Then run:

flutter pub get

Setup #

iOS Setup #

Add the following keys to your ios/Runner/Info.plist file to request camera and microphone permissions:

<plist version="1.0">
    <dict>
        <!-- Add the following keys inside the <dict> section -->
        <key>NSCameraUsageDescription</key>
        <string>We need camera access to capture documents.</string>
        <key>NSMicrophoneUsageDescription</key>
        <string>We need microphone access for audio-related features.</string>
    </dict>
</plist>

Android Setup #

1. Update the minSdkVersion to 21 or higher in android/app/build.gradle:

android {
    defaultConfig {
        minSdk 21
    }
}

2. Add these permissions to your AndroidManifest.xml file:

<manifest xmlns:android="http://schemas.android.com/apk/res/android">

    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-feature android:name="android.hardware.camera" />
    <uses-feature android:name="android.hardware.camera.autofocus" />

    <application android:label="MyApp" android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">
        <!-- Activities and other components -->
    </application>

</manifest>

Handling Camera Access Permissions #

Permission errors may occur when initializing the camera. You must handle them appropriately. Below are the possible error codes:

Usage #

Import the Package #

import 'package:document_camera_frame/document_camera_frame.dart';

Example #

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: DocumentTypeSelectionScreen(),
    );
  }
}

/// Example for different document types
class DocumentTypeSelectionScreen extends StatelessWidget {
  const DocumentTypeSelectionScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Select Document Type'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: [
            _buildDocumentTypeCard(
              context,
              'Driver\'s License',
              'Capture both front and back sides',
              Icons.credit_card,
                      () => _navigateToCamera(context, DocumentType.driverLicense),
            ),
            const SizedBox(height: 16),
            _buildDocumentTypeCard(
              context,
              'Passport',
              'Capture the main page only',
              Icons.book,
                      () => _navigateToCamera(context, DocumentType.passport),
            ),
            const SizedBox(height: 16),
            _buildDocumentTypeCard(
              context,
              'ID Card',
              'Capture both sides',
              Icons.badge,
                      () => _navigateToCamera(context, DocumentType.idCard),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildDocumentTypeCard(
          BuildContext context,
          String title,
          String subtitle,
          IconData icon,
          VoidCallback onTap,
          ) {
    return Card(
      child: ListTile(
        leading: Icon(icon, size: 40, color: Theme.of(context).primaryColor),
        title: Text(title, style: const TextStyle(fontWeight: FontWeight.bold)),
        subtitle: Text(subtitle),
        trailing: const Icon(Icons.arrow_forward_ios),
        onTap: onTap,
      ),
    );
  }

  void _navigateToCamera(BuildContext context, DocumentType documentType) {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) =>
                _buildCameraForDocumentType(context, documentType),
      ),
    );
  }

  Widget _buildCameraForDocumentType(
          BuildContext context, DocumentType documentType) {
    switch (documentType) {
      case DocumentType.driverLicense:
        return DocumentCameraFrame(
          frameWidth: 320,
          frameHeight: 200,
          frontSideTitle: const Text('Scan Front of License',
                  style: TextStyle(color: Colors.white)),
          backSideTitle: const Text('Scan Back of License',
                  style: TextStyle(color: Colors.white)),
          requireBothSides: true,
          // Callbacks
          onFrontCaptured: (imagePath) {
            debugPrint('Front side captured: $imagePath');
            // You can perform additional actions here
            // such as uploading to server, saving locally, etc.
          },

          onBackCaptured: (imagePath) {
            debugPrint('Back side captured: $imagePath');
            // You can perform additional actions here
          },

          onBothSidesSaved: (documentData) {
            debugPrint('Document capture completed!');
            debugPrint('Front: ${documentData.frontImagePath}');
            debugPrint('Back: ${documentData.backImagePath}');
            debugPrint('Is complete: ${documentData.isComplete}');

            // Navigate to next screen or process the captured document
            _handleDocumentSaved(context, documentData);
          },
        );

      case DocumentType.passport:
        return DocumentCameraFrame(
          frameWidth: 300,
          frameHeight: 450,
          actionButtonHeight: 40,
          title: const Text('Scan Passport',
                  style: TextStyle(color: Colors.white)),
          requireBothSides: false,
          showSideIndicator: false,
          frontSideInstruction:
          "Position the main page of your passport within the frame",
          onBothSidesSaved: (data) {
            debugPrint('Passport captured');
            Navigator.of(context).pop();
          },
        );

      case DocumentType.idCard:
        return DocumentCameraFrame(
          frameWidth: 320,
          frameHeight: 200,
          frontSideTitle: const Text('Scan Front of ID',
                  style: TextStyle(color: Colors.white)),
          backSideTitle: const Text('Scan Back of ID',
                  style: TextStyle(color: Colors.white)),
          requireBothSides: true,
          showSideIndicator: false,
          onBothSidesSaved: (documentData) {
            // Handle the saved document
            _processDocument(context, documentData);
            Navigator.of(context).pop();
          },
        );
    }
  }

  void _handleDocumentSaved(
          BuildContext context, DocumentCaptureData documentData) {
    // Show success dialog
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('Document Captured Successfully'),
        content: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text('Your document has been captured successfully.'),
            const SizedBox(height: 10),
            Text(
                    'Front side: ${documentData.frontImagePath != null ? "✓" : "✗"}'),
            Text(
                    'Back side: ${documentData.backImagePath != null ? "✓" : "✗"}'),
          ],
        ),
        actions: [
          TextButton(
            onPressed: () {
              Navigator.of(context).pop(); // Close dialog
              Navigator.of(context).pop(); // Go back to previous screen
            },
            child: const Text('OK'),
          ),
        ],
      ),
    );
  }

  static void _processDocument(
          BuildContext context, DocumentCaptureData documentData) {
    // Process the captured document data
    final hasBackSide = documentData.backImagePath != null;

    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text(
          hasBackSide
                  ? 'Document captured with both sides!'
                  : 'Document captured (front side only)',
        ),
        backgroundColor: Colors.green,
      ),
    );
  }
}

enum DocumentType {
  driverLicense,
  passport,
  idCard,
}

Widget Parameters #

Widget Parameters #

License #

This project is licensed under the MIT License. See the LICENSE file for details.