Flutterexperts

Flutter is an open-source UI system for making high-level local interfaces on Android and iOS. The initial arrival of Flutter alpha by Google occurred in May 2017. Flutter applications can be written in the Dart programming language. Google reported the Flutter Beta variant in February at the Mobile World Congress 2018.

Dart imparts highlight to numerous different languages like Kotlin and Swift, and it tends to be effectively transpiled into JavaScript code. Flutter is open-source and allowed to utilize. It can work with your current code. Flutter takes into consideration a responsive and definitive style programming it takes after React Native. There is no compelling reason to utilize an extension in a Flutter to improve generally speaking overall performance and startup time. By using Dart, it will consequently accomplish Ahead-of-Time compilation (AOT).

In this article, we will explore OCR In Flutter. We will also implement a demo the OCR using the flutter_mobile_vision package in your flutter applications.

flutter_mobile_vision | Flutter Package
Add this to your package’s pubspec.yaml file: dependencies: flutter_mobile_vision: ^0.1.4+1 You can install packages…pub.dev

Table Of Contents::

OCR

Implementation

Code Implement

Code File

Conclusion

---

---

OCR :

OCR represents Optical Character Recognition. It is a cycle of transformation of composed pictures, printed text into the machine-encoded text, which implies it will give us a text from images that contain the text.

Let’s explore how FineReader OCR recognizes text. First, the program analyzes the structure of the document picture. It separates the page into components, for example, blocks of texts, tables, pictures, and so on. The lines are isolated into words and then — into characters. When the characters have been singled out, the program contrasts them and a lot of example pictures. It propels various speculations about what this character is. Base on these theories, the program examines various variations of breaking of lines into words and words into characters. In the wake of handling an enormous number of such probabilistic theories, the program at long last takes the choice, giving you the recognized text.

Demo Module ::

This video shows how OCR will work and recognizes text from the image and tap on this text on a rectangular box, and then they will be shown on your device.

Implementation :

Step 1: Add the dependencies

Add dependencies to pubspec — yaml file.

dependencies:

flutter_mobile_vision: ^letset version

Step 2: Import

import 'package:flutter_mobile_vision/flutter_mobile_vision.dart';

Step 3: Run flutter packages get in the root directory of your app.

Step 4: For Andriod

Add features, permisssion, and activity in the main/Androidmanifest.xml file.

<uses-feature android:name="android.hardware.camera" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />
<activity android:name="io.github.edufolly.fluttermobilevision.ocr.OcrCaptureActivity" />

Step 5: Enable AndriodX

Add this to your gradle.properties file:

org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true

How to implement code in dart file :

You need to implement it in your code respectively:

Create a new dart file called ocr_page.dart inside the lib folder.

On this page, we will create a button for scanning and a hint text. When the user can scan the image and recognizes the text, then the user taps on this text on a rectangular box, and then they will replace the text and show it in your devices.

We will create a string _text and int _ocrCamera

int _ocrCamera = FlutterMobileVision.CAMERA_BACK;
String _text = "TEXT";

We will create a Raised button

Center(
  child: RaisedButton(
   onPressed: _read,
   child: Text('Scanning',
     style: TextStyle(fontSize: 16),
   ),
  ),
),

In this button, onPressed() method, we will call _read() function, and the text was called scanning.

Let’s declare the _read() function

Future<Null> _read() async {
  List<OcrText> texts = [];
  try {
    texts = await FlutterMobileVision.read(
      camera: _ocrCamera,
      waitTap: true,
    );

setState(() {
      _text = texts[0].value;
    });
  } on Exception {
    texts.add( OcrText('Failed to recognize text'));
  }
}

You will compose this code on an open camera and take capture text. You will get the text just when you tap on a rectangular box that contains text inside, and afterward, the content will show your screen.

Code File :

import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_mobile_vision/flutter_mobile_vision.dart';

class OCRPage extends StatefulWidget {
  @override
  _OCRPageState createState() => _OCRPageState();
}

class _OCRPageState extends State<OCRPage> {

int _ocrCamera = FlutterMobileVision.CAMERA_BACK;
  String _text = "TEXT";

@override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: Colors.white70,
          appBar: AppBar(
            automaticallyImplyLeading: false,
            title: Text('OCR In Flutter'),
            centerTitle: true,
          ),
          body: Container(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Text(_text,style: TextStyle(
                    fontSize: 18,
                    fontWeight: FontWeight.bold),
                ),
                Center(
                  child: RaisedButton(
                   onPressed: _read,
                   child: Text('Scanning',
                     style: TextStyle(fontSize: 16),
                   ),
                  ),
                ),
              ],
            ),
          ),
      ),
    );
  }

Future<Null> _read() async {
    List<OcrText> texts = [];
    try {
      texts = await FlutterMobileVision.read(
        camera: _ocrCamera,
        waitTap: true,
      );

setState(() {
        _text = texts[0].value;
      });
    } on Exception {
      texts.add( OcrText('Failed to recognize text'));
    }
  }
}

Conclusion :

In the article, I have explained the basic demo of OCR; you can modify this code according to your choice, and this was a small introduction of OCR from my side and its working using Flutter.

I hope this blog will provide you with sufficient information in Trying up OCR in Flutter in your flutter projects. This is a demo example of OCR in a flutter and how to recognizes text from images, and also, they will recognize text from different items like a page, table, structure, etc., So please try it.

❤ ❤ Thanks for reading this article ❤❤

---

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

find the source code of the Flutter OCR Demo:

flutter-devs/flutter_ocr_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com

---

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

---