How to Create a Flutter Document Scanner

Can't wait to see the fun part?

Jump to code

Document Scanner App

A document scanner app is a professional tool that uses the device's camera to take a picture of a physical (paper) document and transforms it into a digital version. The main goal is to make it look like it was scanned with a Desktop Scanner. That is, crisp text and high contrast between background and text. In order to achieve this, the document scanner needs to do a few processing steps:

• Document edge detection within the image in order to crop the document
• Do a perspective correction to make the document look as it was scanned from top
• Apply some sort of filter to enhance the colors and make the background mostly white

Most successful scanner apps like Adobe Scan or CamScanner are able to do the document recognition within the camera frame in real time to make the document scanning process as easy and less error prone as possible.

If you take a look at more sophisticated scanner apps or document management apps like our app Docutain, they go a few steps further. Once the document was scanned successfully, OCR text recognition is run. With this, you can get two things:

• Searchable PDF files, as they include the recognized text
• Intelligent Data Extraction, e.g. invoice or address data

Building a high quality document scanner from scratch takes a lot of time, effort and knowledge in a lot of different specializations. Even if you were to build a document scanner successfully, your job won't be done. The vast majority of devices (especially Android) and OS versions cause a lot of maintenance work to be done in order to maintain the compatibility and high quality of your document scanner. All in all it costs a lot of money, time and manpower to have a successful document scanner - trust us, we've been there.

So what if I told you that there is a possibility to get a world class document scanner and being able to integrate it into your Flutter app in no time?

This short tutorial will guide you through the process of adding a top notch scanner into your Flutter app by using our Docutain Document Scanner SDK.

Getting started

First, you need a Flutter project which you will use to implement the document scanner. Either create it within Android Studio or with the following command:

flutter create documentscanner_sample

The Docutain SDK for Flutter is distributed via pub.dev: Docutain SDK Flutter Plugin.
Add the following dependency to your pubsepc.yaml:

dependencies:
  docutain_sdk: ^1.0.2

Fetch and install the Docutain SDK plugin. Depending on your IDE you might find a button to do this or run the following command in the Flutter CLI:

flutter pub get

Implement the Document Scanner Feature

A great Document Scanner SDK stands out by providing the functionality with just a few lines of code, so that's what we did. In order to start the document scanner you just need to add one line of code:

var result = await DocutainSdkUi.scanDocument(DocumentScannerConfiguration());

Of course there are a lot of possibilities to alter the scanning behaviour and theme the scanner to match your corporate branding, but that is not the focus of this tutorial. You can check out our Sample on Github and our Documentation to get a deep dive into the Docutain SDK.

Add OCR Text Recognition Feature

Adding OCR Text recognition to your document scanner is just as easy. Just add the following line of code once the scan process finished:

String text = await DocutainSdkDocumentDataReader.getText();

This will provide you the text of the scanned document. If it has multiple pages it will return the text of all scanned pages. Of course you can get the text of a specific page by providing the page number. OCR Text recognition also works on imported files (images and PDF files).

Add Data Extraction Feature

You can probably guess it already. Adding data extraction features to your Flutter app also is possible by adding just one line of code:

String json = await DocutainSdkDocumentDataReader.analyze();

The returned data will be JSON formatted, you can find samples here: Data Extraction Documentation. Currently the best results will be achieved for documents that contain German language. If you need to support different languages our you need to detect specific kinds of data, we would love to hear from you: Contact us.

If you are interested in a more technical kind of view, check out the following two articels:

• Edge Detection For Image Processing
• How to transform a photo-scanned document into a professionally scanned document

Learn more about the Docutain SDK. Besides the Document Scanner SDK we also offer a Barcode Scanner SDK. All SDKs are available for all major platforms/frameworks.

If you want to test the Document Scanner SDK without writing any lines of code, check out our Showcase App.