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 cross-platform document scanner app 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.

Prerequesites

You can find exhaustive information on how to get started with Flutter by reading the Flutter documentation. The following prerequesites are a shortened version based on a Windows development platform.

Configure a text editor or IDE

Basically you can implement and run Flutter apps using any kind of text editor in combination with the Flutter CLI. However, a professional IDE with a Flutter extension will provide you many benefits, e.g. code completion, syntax highlighting, debugging and many more. The most popular options are:

• Visual Studio Code 1.75 or later with the Flutter extension for VS Code
• Android Studio 2022.3 (Giraffe) or later with the Flutter plugin for IntelliJ
• IntelliJ IDEA 2022.3 or later with the Flutter plugin for IntelliJ

Flutter SDK

If you follow our recommendation to use Visual Studio Code, use the following instructions to install the Flutter SDK: Install Flutter SDK in Visual Studio Code. If you have chosen any other option, install the Flutter SDK manually.

If you are interested in learning how to create a Flutter Plugin from scratch, follow this guide.

Getting started

First, you need a Flutter project which you will use to implement the document scanner. Either create it in your IDE or with the following command in your shell or terminal:

flutter create documentscanner_sample

The Docutain SDK for Flutter is distributed via pub.dev: Docutain SDK Flutter Plugin.

The pubspec file specifies dependencies that the project requires, such as particular packages (and their versions), fonts, or image files. For more information about the pubspec file, see the Flutter pubspec documentation.

Add the following dependency to your pubspec.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());

Document Scanner Configuration

The Docutain Document Scanner SDK comes with predefined settings, theming and layouts. The default settings will be a good choice in most cases. The predefined layouts are the result of our long standing experience of our Docutain Document Management App, which includes the Docutain SDK and is used by millions of users around the world on a daily basis.

If your use case requires different default values, e.g. single page scanning instead of multi page scanning, you can of course change them. Either by setting them fixed in your code, or by providing a custom settings page providing the user to change these values on his behalf. It is also possible to alter the default theming to visually integrate the Scanner into your corporate branding.

Most common Document Scanner Settings

Default scan filter
Our Scanner has a set of currently 8 predefined image filters. All of them have their own strengths, however, the one we have defined as default will provide you the best possible scan quality in almost all the cases. Nonetheless, it is of course possible to set any of the predefined filters as the default scan filter.

Automatic Capture
Docutain's Document Scanner captures the image at the perfect moment automatically. The only thing the user needs to do is to hold the phone above the document to be scanned. However, if you need the user to capture the image manually, you can disable automatic capture.

Multi Page Scan
Scanning multiple pages at once is the default setting, this will ensure maximum efficiency when scanning. If you need single page scanning, of course this is also possible.

Theming
Theming is an important part when it comes to matching the scanner to your corporate branding. You can find all possible theming options in our documentation: Flutter Document Scanner Theming. The Docutain SDK supports native dark mode theming as well.

There are a lot more configuration options. If you are interested in them, feel free to check out our documentation or sample app on Github.

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.

How to publish on pub.dev

Once you finished implementing your Flutter app or package, you most likely want to make it available to other users. The place you want to do this is pub.dev. Flutter's documentation includes all you need to know, so we don't explain it here. But trust me, it is pretty easy to do.

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.