Perform Text Recognition in Flutter Apps with 2 lines of code

Sometimes we might came across signs and documents which are informative and the next action we do is to take out our phone to take a photo. However wouldn’t it be nice if the photo’s contents could be recognised and converted into text? Thanks to the advance in text-recognition technologies, OCR related operations could be done much much much easier than ever — we don’t need a setup a server to run the recognition algorithms anymore… whew~

This blog would be focusing on how to add in text-recognition capability into a Flutter mobile phone app — yep~ since it is written in Flutter, we are talking about both iOS and Android apps :)

PS. source code for the project available at: https://gitlab.com/quoeamaster/blog_flutter_ocr

Create the Flutter project

After having the SDK installed, creating a flutter project is quite straight forward (to be honest :) ). Navigate to the desired folder through your terminal app (e.g. use “iTerm” on Mac, use “command prompt” on Windows); then run the following:

flutter create {PROJECT_NAME}

In a blink of the eye, the project structure would be created under the PROJECT_NAME folder. Next is to open the project under an IDE. There are many IDE choices for Flutter development, so do feel free to use your favourite IDE and explore the corresponding Dart and Flutter plugins~

Once the project is opened, navigate to lib > main.dart: This is where the main Flutter app begins. Basically the scaffolding code in main.dart would contain a main() which runs an Application named as MyApp. MyApp on the other hand loads the first UI / page named MyHomePage. We would be updating the MyHomePage class to show:

  • an image preview,
  • a textbox area showing the recognised results,
  • a button to trigger text-recognition and
  • a clickable label presenting the photo album

In real world, we would use the phone’s camera to take photos OR to pick a photo from our photo album (camera roll etc), however for simplicity, we would just pick an existing photo from the album.

PS. If you are interested in adding photo taking features; would recommend trying the image-picker plugin and here is a good article mentioning tips on using the plugin.

Building the UI

the finished UI

Add simple-ocr plugin

Navigate to lib > main.dart , and import the plugin at the top of the file:

import ‘package:simple_ocr_plugin/simple_ocr_plugin.dart’;

Next, update the code for method _onRecogniseTap() if you haven’t earlier:

Yes, it is just that simple~ And you should be able to see the text-area below the image preview showing recognised text.

displaying the recognised text

PS. Accuracy of the recognised text depends on lots of factors including the quality of the photo, the angle of the text (such as less than 45 degrees of rotation deviated from the horizontal), lighting contrast and … the resolution of your photo. For most cases, the recognition accuracy is quite good and acceptable though.

Running on Phones

For Android development, no special settings would be required. During the first run of the app, it would try to download the required Machine Learning models for text-recognition through the GooglePlay services and after that your app should be running smoothly.

For iOS development, we would need to update the Podfile before deployment. Navigate to ios folder, modify the Podfile like this:

# Uncomment this line to define a global platform for your project
# platform :ios, ‘9.0’
platform :ios, ‘11.0’

Add back a “platform” sentence to declare at least iOS 11.0 could run this project.

Then through the terminal app (iTerm on mac), run the following to build the project:

pod install

If you see something like the following, congratulations~ Setup is correct!

dependencies and pods installed successfully

Finally open XCode to load the ios/Runner.xcworkspace project. Be very very very CAREFUL on which project to load, always load the workspace project which would include both:

  • Runner project — our Flutter app and
  • Pods project — the plugins and dependencies we needed for our Flutter app
signing the app before deployment

The last thing before deployment or testing on your real iPhone is to “sign” your app. You would need a profile / team registered through the “Apple Developer Program”, if you don’t have a profile yet goto https://developer.apple.com/programs/ to register one for free. No worries, as long as you are not publishing your app to the AppStore, you won’t be charged :)

Good~ All set and finally to click on the “play” button to build and deploy to your iPhone.

Limitations

PS. Remember that using Firebase would need to join a “pay-as-you-go” plan. :)

Closing

  • creation of Flutter app (useful if you are totally new to Flutter)
  • building the UI (useful if you are totally new to Flutter)
  • adding plugin dependencies to the Flutter app
  • deploying the app to your phone (a bit tricky if you are on the iOS platform)

Final words are … to make sure text recognition would be performed correctly, sometimes we would need to optimise the given image / photo files. Again there are lots of image related libraries available, do pick up one or two when the recognition results are not desirable. :)

Happy coding as always. The source code of the project is available at https://gitlab.com/quoeamaster/blog_flutter_ocr

a java / golang / flutter developer, a big data scientist, a father :)