Google ML-KIT In Flutter

Before starting the blog topic Google ML-KIT In Flutter, let’s discuss ML-KIT first. Machine-Learning Kit is a mobile SDK that brings machine-learning expertise to native as well as hybrid apps. ML-KIT comes with predefined ready-to-use APIs, that can be used by anyone who does not have deep knowledge of machine learning.

With the help of Google ML-KIT, we can perform various operations that can enhance or beautify the overall experience of the application. In this blog, we will discuss text recognition from an image with the help of Google ML-KIT In Flutter. Let’s explore, how we can implement the ML-KIT in Flutter with mentioned steps.

You can also explore our Flutter app development company page.

1. Create the App

First of all, we need to create a new app.

flutter create mlkitdemo

1	flutter create mlkitdemo

2. Adding Google ML-KIT Package

Now we will add the ml-kit package in our pubspec.yaml folder inside our flutter project. I have added the following package, you can also add the updated version.

google_mlkit_text_recognition: ^0.11.0

1	google_mlkit_text_recognition: ^0.11.0

3. Adding package for Image

Now, according to our use case, we can use multiple types of packages for getting the image. In our demo, we used an image from the Gallery.

For accessing the gallery, we have used the image picker package:

  image_picker: ^0.6.3+4

1	image_picker: ^0.6.3+4

4. Now, we will initialize some required variable

final ImagePicker picker = ImagePicker();
/// ImagePicker Controller

XFile? image; 
/// To store picked image

String? finalString; 
/// To store Recognised String from image 

bool? isLoading;
/// To show the loader while fetching the image

final ImagePicker picker = ImagePicker();

/// ImagePicker Controller

XFile? image;

/// To store picked image

String? finalString;

/// To store Recognised String from image

bool? isLoading;

/// To show the loader while fetching the image

5. Create a Button to Select the image and export all Strings.

Padding( 
padding: const EdgeInsets.symmetric(horizontal: 30.0), 
child: ElevatedButton( 
onPressed: () async { 

setState(() { isLoading = true; }); 
/// To show loader 

image = await picker.pickImage(source: ImageSource.gallery); 
/// To choose image from gallery and store in "image"

String a = await getImageToText(image!.path); 
/// Export all strings from choosed image

setState(() { finalString = a; isLoading = false; }); 
/// To hide loader 

}, 
child: 
Row( mainAxisAlignment: MainAxisAlignment.center, 
children: const [ 
Icon( Icons.camera_alt_outlined, ), 
SizedBox( width: 5.0, ), 
Text("Tap me to Choose Photo") ], 
)), 
),


/// TO EXPORT STRINGS FROM SELECTED IMAGE
Future getImageToText(final imagePath) async { 
final textRecognizer = TextRecognizer(
script: TextRecognitionScript.latin
); 
final RecognizedText recognizedText = await textRecognizer.processImage(
InputImage.fromFilePath(imagePath)); 
String text = recognizedText.text.toString(); 
return text; 
}

Padding(

padding: const EdgeInsets.symmetric(horizontal: 30.0),

child: ElevatedButton(

onPressed: () async {

setState(() { isLoading = true; });

/// To show loader

image = await picker.pickImage(source: ImageSource.gallery);

/// To choose image from gallery and store in "image"

String a = await getImageToText(image!.path);

/// Export all strings from choosed image

setState(() { finalString = a; isLoading = false; });

/// To hide loader

child:

Row( mainAxisAlignment: MainAxisAlignment.center,

children: const [

Icon( Icons.camera_alt_outlined, ),

SizedBox( width: 5.0, ),

Text("Tap me to Choose Photo") ],

)),

/// TO EXPORT STRINGS FROM SELECTED IMAGE

Future getImageToText(final imagePath) async {

final textRecognizer = TextRecognizer(

script: TextRecognitionScript.latin

);

final RecognizedText recognizedText = await textRecognizer.processImage(

InputImage.fromFilePath(imagePath));

String text = recognizedText.text.toString();

return text;

}

6. Show Selected Image and Exported Text

/// SELECTED IMAGE
if (image != null)
Image.file( 
   File(image?.path ?? ''), 
   fit: BoxFit.fill, 
   height: MediaQuery.of(context).size.height / 4, 
   width: MediaQuery.of(context).size.width / 1.5, ), 

/// EXPORTED STRING
Text(
  finalString ?? '', 
  style: const TextStyle(color: Colors.black, fontSize: 16), 
)

/// SELECTED IMAGE

if (image != null)

Image.file(

File(image?.path ?? ''),

fit: BoxFit.fill,

height: MediaQuery.of(context).size.height / 4,

width: MediaQuery.of(context).size.width / 1.5, ),

/// EXPORTED STRING

Text(

finalString ?? '',

style: const TextStyle(color: Colors.black, fontSize: 16),

)

7. Full Code

import 'dart:io';

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

class TextFromImageDemo extends StatefulWidget {
  const TextFromImageDemo({Key? key}) : super(key: key);

  @override
  State<TextFromImageDemo> createState() => _TextFromImageDemoState();
}

class _TextFromImageDemoState extends State<TextFromImageDemo> {
  final ImagePicker picker = ImagePicker();
  XFile? image;
  String? finalString;
  bool? isLoading;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Google ML-KIT Text Recognition'),
        centerTitle: true,
      ),
      body: Stack(
        children: [
          Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                if (image != null)
                  Image.file(
                    File(image?.path ?? ''),
                    fit: BoxFit.fill,
                    height: MediaQuery.of(context).size.height / 4,
                    width: MediaQuery.of(context).size.width / 1.5,
                  ),
                const SizedBox(
                  height: 20.0,
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 30.0),
                  child: ElevatedButton(
                      onPressed: () async {
                        setState(() {
                          isLoading = true;
                        });
                        image =
                            await picker.pickImage(source: ImageSource.gallery);
                        String a = await getImageToText(image!.path);
                        setState(() {
                          finalString = a;
                          isLoading = false;
                        });
                      },
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: const [
                          Icon(
                            Icons.camera_alt_outlined,
                          ),
                          SizedBox(
                            width: 5.0,
                          ),
                          Text("Tap me to Choose Photo")
                        ],
                      )),
                ),
                const SizedBox(
                  height: 20.0,
                ),
                Text(
                  finalString ?? '',
                  style: const TextStyle(color: Colors.black, fontSize: 16),
                )
              ],
            ),
          ),
          Visibility(
              visible: isLoading == true,
              child: const Positioned(
                child: Center(
                  child: CircularProgressIndicator(),
                ),
              ))
        ],
      ),
    );
  }

  Future getImageToText(final imagePath) async {
    final textRecognizer = TextRecognizer(script: TextRecognitionScript.latin);
    final RecognizedText recognizedText =
        await textRecognizer.processImage(InputImage.fromFilePath(imagePath));
    String text = recognizedText.text.toString();
    return text;
  }
}

100

import 'dart:io';

import 'package:flutter/material.dart';

import 'package:google_mlkit_text_recognition/google_mlkit_text_recognition.dart';

import 'package:image_picker/image_picker.dart';

class TextFromImageDemo extends StatefulWidget {

const TextFromImageDemo({Key? key}) : super(key: key);

@override

State<TextFromImageDemo> createState() => _TextFromImageDemoState();

}

class _TextFromImageDemoState extends State<TextFromImageDemo> {

final ImagePicker picker = ImagePicker();

XFile? image;

String? finalString;

bool? isLoading;

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: const Text('Google ML-KIT Text Recognition'),

centerTitle: true,

body: Stack(

children: [

Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: [

if (image != null)

Image.file(

File(image?.path ?? ''),

fit: BoxFit.fill,

height: MediaQuery.of(context).size.height / 4,

width: MediaQuery.of(context).size.width / 1.5,

const SizedBox(

height: 20.0,

Padding(

padding: const EdgeInsets.symmetric(horizontal: 30.0),

child: ElevatedButton(

onPressed: () async {

setState(() {

isLoading = true;

});

image =

await picker.pickImage(source: ImageSource.gallery);

String a = await getImageToText(image!.path);

setState(() {

finalString = a;

isLoading = false;

});

child: Row(

mainAxisAlignment: MainAxisAlignment.center,

children: const [

Icon(

Icons.camera_alt_outlined,

SizedBox(

width: 5.0,

Text("Tap me to Choose Photo")

)),

const SizedBox(

height: 20.0,

Text(

finalString ?? '',

style: const TextStyle(color: Colors.black, fontSize: 16),

)

Visibility(

visible: isLoading == true,

child: const Positioned(

child: Center(

child: CircularProgressIndicator(),

))

);

}

Future getImageToText(final imagePath) async {

final textRecognizer = TextRecognizer(script: TextRecognitionScript.latin);

final RecognizedText recognizedText =

await textRecognizer.processImage(InputImage.fromFilePath(imagePath));

String text = recognizedText.text.toString();

return text;

}

>> Here is the output app result of our app:

This is a basic example of text recognition through ML-KIT. You can perform multiple operations through Google ML-KIT.

Hope this blog helps you to use Google ML-KIT In Flutter.

For more information, please go through the Google ML-KIT Text Recognition and Google Ml-KIT docs.

flutter ML Kit Text Recognition

Abhishek Rathore

30 Jan, 2024
Updated by - Abhishek Rathore
27 Apr, 2023
Updated by - Abhishek Rathore

. . .