Open In App

Flutter - Extract Data From an Image to Text

Last Updated : 24 Apr, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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:


Next Article

Similar Reads