Document Scanning & OCR in Flutter Apps

Introduction

In mobile development, scanning physical documents and extracting text through Optical Character Recognition (OCR) elevates user experience. Flutter’s cross-platform nature makes it an ideal choice for building polished scanning interfaces and integrating powerful OCR engines. This tutorial demonstrates how to select scanning plugins, build a user-friendly scanner UI, integrate an OCR engine, preprocess images for accuracy, and export the scanning results in a Flutter app.

Choosing a Scanning Plugin

A crucial first step is selecting a reliable document scanning plugin. Two popular options are flutter_mobile_vision and document_scanner_flutter. The former offers simple camera-based scanning with auto-cropping, while the latter provides edge detection and perspective correction.

To install document_scanner_flutter, add it to pubspec.yaml:

dependencies:
  document_scanner_flutter

Then run flutter pub get.

This plugin provides a DocumentScanner widget that captures and crops the document. It leverages native libraries on Android and iOS for edge detection and returns a high-resolution File.

Building the Scanner UI

A smooth user interface guides users through capturing or selecting documents. Wrap the scanner in a full-screen layout and display real-time edge detection feedback.

import 'package:document_scanner_flutter/document_scanner_flutter.dart';

class ScanPage extends StatefulWidget {
  @override
  _ScanPageState createState() => _ScanPageState();
}

class _ScanPageState extends State<ScanPage> {
  Future<void> startScanning() async {
    final scanned = await DocumentScannerFlutter.launch(context);
    if (scanned != null) {
      Navigator.pushNamed(context, '/preview', arguments: scanned);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Scan Document')),
      body: Center(
        child: ElevatedButton(
          onPressed: startScanning, child: Text('Start Scan')),
      ),
    );
  }
}

This snippet shows launching the scanner and handling the result. The preview screen can show the scanned File for confirmation.

Integrating OCR with ML Kit

After capturing a clean document image, integrate Google ML Kit’s OCR to extract text. Install google_mlkit_text_recognition:

dependencies:
  google_mlkit_text_recognition

Then perform text recognition:

import 'dart:io';
import 'package:google_mlkit_text_recognition/google_mlkit_text_recognition.dart';

Future<String> recognizeText(File imageFile) async {
  final inputImage = InputImage.fromFile(imageFile);
  final recognizer = TextRecognizer(script: TextRecognitionScript.latin);
  final result = await recognizer.processImage(inputImage);
  await recognizer.close();
  return result.text;
}

Call recognizeText with your scanned image File to retrieve raw OCR output.

Image Preprocessing and Quality Enhancements

OCR accuracy improves when images are preprocessed to enhance contrast and reduce noise. Use the image package to convert an image to grayscale and apply thresholding:

import 'dart:io';
import 'package:image/image.dart' as img;

File preprocessImage(File file) {
  final bytes = file.readAsBytesSync();
  img.Image? image = img.decodeImage(bytes);
  if (image == null) return file;
  img.grayscale(image);
  img.adaptiveThreshold(image, blockSize: 15, offset: 10);
  final out = File('${file.path}_proc.png')..writeAsBytesSync(img.encodePng(image));
  return out;
}

Call preprocessImage before OCR to boost recognition rates, especially on uneven lighting or colored backgrounds.

Exporting Scanned Text and Results

Once OCR is complete, present the extracted text to users and offer export options. You can:

• Save to a local database (e.g., sqflite).

• Export as PDF using pdf package.

• Share via native share sheets using share_plus.

Example of generating a simple PDF with extracted text:

import 'dart:io';
import 'package:pdf/widgets.dart' as pw;

Future<File> createTextPdf(String text, String path) async {
  final doc = pw.Document();
  doc.addPage(pw.Page(build: (ctx) => pw.Text(text)));
  final file = File(path);
  await file.writeAsBytes(await doc.save());
  return file;
}

Let users select an export format and handle permissions accordingly.

Vibe Studio

Vibe Studio, powered by Steve’s advanced AI agents, is a revolutionary no-code, conversational platform that empowers users to quickly and efficiently create full-stack Flutter applications integrated seamlessly with Firebase backend services. Ideal for solo founders, startups, and agile engineering teams, Vibe Studio allows users to visually manage and deploy Flutter apps, greatly accelerating the development process. The intuitive conversational interface simplifies complex development tasks, making app creation accessible even for non-coders.

Conclusion

By combining a document scanning plugin, a clean UI, ML Kit OCR, and image preprocessing, you can build a robust Flutter document scanner. Enhance the workflow with PDF export and sharing to deliver a full-featured scanning solution in your mobile development projects. Experiment with additional machine learning models or cloud-based OCR for specialized use cases.