Flutter-Text Recognition with Firebase ML Vision

This project is a demo App that can take text from a picture taken with the camera. I was making a small mock App to show as a draft to a client when I step into some troubles based most on some problems with the documentation. So I decided to write about it, so I don’t forget it, and to help anyone else who’s going to use the plugin.

Rodrigo Mena
May 4 · 5 min read

The first thing to do (besides creating a new project) is to add the firebase-ml-vision plugin you can find it in here. In the readme and installing section tells us: “You must also configure Firebase for each platform project”. So if you only add this plugin to the pubspec.yaml you’re going to get the following error messages:

* What went wrong: A problem occurred evaluating project ‘:firebase_ml_vision’.

> Could not find the firebase_core FlutterFire plugin, have you added it as a dependency in your pubspec?

What went wrong:A problem occurred configuring project ‘:firebase_ml_vision’.

> compileSdkVersion is not specified. Please add it to build.gradle

So, that’s when you realize something obvious, you need to add the firebase_core plugin too. The second error message is going to dissapear once you add the firebase-core plugin. So our pubspec.yaml looks like this: (image picker is just to take an image with the camera):

In order to install firebase core you need to follow some steps, you can find them here in other post Iwrote.

Last you still need to configure (for Android) according to this instructions in here.

Add the ML Vision dependencies in app/build.gradle:

And optional but recommended, configure your app to automatically download the ML model to the device after your app is installed from the Play Store:

Now in order to use the text recognition we’re going to create a simple app in a new file under “pages” folder, the file name is “pick_page.dart” and in there we’ll create a new StatefulWidget with name “PickReceipt” this widget is going to have an image picker in order to take a pick (camera icon button on AppBar) and get the text of the picture. The “PickReceipt” widget is going to look like this is going to look like this:

First thing first you have to initialize firebase in order to use it:

For the app we’re going to usea a Container with one column, the column contains tree widgets, the Image widget to show the picture taken with the camera, and two buttons, one for get the text from the picture and the other one just to clear the picture.

The “takePicture” method only uses the imagePicker to take a picture with the camera. The “showPic” method uses the Image widget to show the picture taken with the camera or an asset image if theres no picture.

Now in the buttons we got the “clearImage” whose only function is to clear the image taken with the camera and the “recognizeText” method which is the one that handles the image text recognition.

Next you need to follow the steps from the plugin documentation which you can find in here.

1. The first thing to do is to create an instance of the detector:

final TextRecognizer _cloudRecognizer = FirebaseVision.instance.cloudTextRecognizer();

2. Then we have to create a FirebaseVisionImage object from our camera image:

final FirebaseVisionImage visionImage =FirebaseVisionImage.fromFile(_image);

3. We need to call “processImage()” with visionImage:

results = await _cloudRecognizer.processImage(visionImage);

4. Last step we need to extract the data, we read each block and then show the text from the image in a dialog (“showText” method). To extract the data we use the “results” object and gets it text property to finally read the data first in blocks, then in lines and last in each line element, so the final method looks like this:

Finally it’s important to release resources with the close() method:

@override
void dispose() {
_cloudRecognizer.close();super.dispose();}

Also you need to make sure to enable the Cloud Vision API in the project, in order to do that you need to go to the google developers console and enable the API for the project you’re using. If not enabled you’ll get a message like this:

Error message Cloud Vision API not enabled

Also make sure to enable billing or you’ll get this error message:

Error message Billing not enabled

And this is the final result:

Flutter Text Recognition Demo APP

That’s how we can use the firebase_ml_vision plugin to extract the text from an image. The app uses flutter 2.0.5. As always remember things can change when using this plugins so always refer to the official documentation.

Geek Culture

Proud to geek out.

Sign up for Geek Culture Hits

By Geek Culture

Subscribe to receive top 10 most read stories of Geek Culture — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app