Flutter – Extract Data From an Image to Text

Google ML kit provides many features, one of them is Image to Text Extraction, through which we can simply extract text from an image. To extract text from the image first we need to take an image as input either from the gallery or camera for which we will use ‘image_picker: ^1.0.4’ (dependency from pub.dev for flutter ) and to extract text from the image we will use ‘google_mlkit_text_recognition: ^0.10.0′(dependency from pub.dev for flutter).

Step By Step Implementation

Step 1. Create Flutter App

On the terminal run: flutter create image_to_text, to create a new flutter project.

Dart

flutter create image_to_text

Step 2. Add Required Packages

From pub.dev add required packages to your ‘pubspec.yaml’ file under dependencies.

XML

dependencies:
  flutter:
    sdk: flutter
  image_picker: ^1.0.4
  google_mlkit_text_recognition: ^0.10.0

Step 3. Add Packages Path to Your Code

Tip Press Control+. to import these path

Dart

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

Step 4. Creating Function to Convert Image to Text

This function is accepting Image Path from another function , and then we are passing ‘InputImage.fromFilePath(imagePath)’ to ‘textRecognizer.processImage(inputImage.fromFilePath(imagePath)’ then it returns Text From Image.

Dart

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;
}

Step 5. Pick Image and display Image to Text

” final XFile? image = await picker.pickImage(source: ImageSource.gallery); ” This code will let us access image from gallary and then pass ” image!.path ” to function we made in step 4 . It will return Text from Image .

Dart

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

late String s="";

class _MyAppState extends State<MyApp> {
  final ImagePicker picker = ImagePicker();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
          child: Scaffold(
        backgroundColor: Colors.white60,
        body: Column(
          children: [
            Container(
              height: 250,
              width: 250,
              child: Center(
                child: GestureDetector(
                    onTap: () async {
                      final XFile? image =
                          await picker.pickImage(source: ImageSource.gallery);
                      String a = await getImageTotext(image!.path);
                      setState(() {
                        s = a;
                      });
                    },
                    child: const Icon(
                      Icons.file_copy,
                    )),
              ),
            ),
            Text(
              s,
              style: TextStyle(color: Colors.black, fontSize: 20),
            )
          ],
        ),
      )),
    );
  }
}

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;
}

Dart

onTap: () async {
                  final XFile? image =
                          await picker.pickImage(source: ImageSource.gallery);
                      String a = await getImageTotext(image!.path);
                      setState(() {
                        s = a;
                      });
                }

Output: