Implementing Real-Time OCR Using Flutter

Using Flutter Mobile Vision package to implement a real-time OCR on Mobile

In the previous articles of this series on developing Flutter application with TensorFlow Lite, we looked at how we can develop Digit Recognizer with Flutter and TensorFlow Lite, Image Classification with Flutter and TensorFlow Lite, Object Detection with Flutter and TensorFlow Lite, Turning the Mobile Camera into a Real-Time Object Detector with Flutter and TensorFlow Lite and Implementing Real-Time Pose Estimation on Mobile Using Flutter.

In this article, we will look into developing a real-time OCR detection without using TensorFlow Lite. The application we are going to build will be able to detect characters presented from a live feed provided by the mobile camera.

Application and Use Cases

OCR or Optical Character Recognition is the technology used to distinguish printed or handwritten text within digital images or physical documents. OCR is commonly used to turn hardcopy, legal, or historic documents into PDFs. Simply put, an OCR system analyses an image and identifies dark areas as the characters that need to be recognized, enabling digital archiving, editing, and document searching with common programs such as Microsoft Word or Google Docs. Characters are recognized using one of two algorithms, Pattern Recognition or Feature Detection.

Required Packages

  • Flutter Mobile Vision

Use the above package as a library, add the dependencies to pubspec.yaml file and run flutter pub get command in the terminal.

Import it into your preferred page using

Flutter Application

Now that we have set up the required library, we can move on to the development of the application that does optical character recognition.

First, create a new dart file named ocr_detection.dart within the lib folder. Inside this page, we will put a button that will initiate the scanning and capture the words from the live feed.

You can access the camera through the flutter_mobile_vision library using the below code:

Now, let us look at how to open the camera and capture the text.

The above read function will get the texts that appear in the live feed and show them inside a rectangular box that has the text inside.

As you can see from the above code snippet, the application will load onto a screen that contains a button Start Scanning that will run the _read() future function. It will then capture the live feed and show all the texts available on-screen within the rectangular box.



If you have read my previous articles about developing applications with TensorFlow Lite, you will find this tutorial to be easy to implement because this library does most of the calculation by itself. If you refer to the documentation of Flutter Mobile Vision, you can see that it can also be used to implement a Face Detection application. Give it a try!

Avatar photo


Our team has been at the forefront of Artificial Intelligence and Machine Learning research for more than 15 years and we're using our collective intelligence to help others learn, understand and grow using these new technologies in ethical and sustainable ways.

Comments 0 Responses

Leave a Reply

Your email address will not be published. Required fields are marked *