SoloBits Share | Learn | Contribute

Image Text Recognition in Flutter

13 Jul 2020

Recently while working on a project, I was assigned a task to implement text recognition also called OCR(Optical Character Recognition). For this task I chose Firebase ML.

Firebase ML

Firebase ML provides us:

  • Text recognition
  • Image labeling
  • Object detection and tracking
  • Face detection and contour tracing
  • Barcode scanning
  • Language identification
  • Translation
  • Smart Reply

For more info: https://firebase.google.com/docs/ml

Text recognition

In this tutorial we’ll be doing a very basic implementaion of Text Recognition.

Importing Package

In pubspec.yaml import Image Picker and ML Vision packages. pubspec will then look something like this:

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.3
  image_picker: ^0.6.7+4
  firebase_ml_vision: ^0.9.4

dev_dependencies:
  flutter_test:
    sdk: flutter

Firebase Setup

If you’ve already set up firebase then skip, else follow this article.
https://solobits.github.io/2020/07/13/firebase/

Text Recognition Implementation

/...
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

/...

// In any Widget of your's return 

Scaffold(
        body: Center(
          child: RaisedButton(
            onPressed: () async {
              

              //Pick an image
              final picker = ImagePicker();

              final pickedFile =
                  await picker.getImage(source: ImageSource.camera);
                  
                  
              //OCR implementation
              //TODO catch errors
              final FirebaseVisionImage visionImage =
                  FirebaseVisionImage.fromFile(File(pickedFile.path));

              final TextRecognizer textRecognizer =
                  FirebaseVision.instance.textRecognizer();

              final VisionText recognizedText =
                  await textRecognizer.processImage(visionImage);

              //Text will be displayed in the debug console     
              debugPrint(recognizedText.text);
            },
            child: const Text('Get OCR Text'),
          ),
        ),
      )

That’s it, cheers. 🍻 Simple isn’t it.

Hope it helps.

Related posts