Building a Text Extraction App with Google ML Kit in Flutter

Introduction: Text extraction from images is a powerful capability that can be useful in various applications. In this article, we will explore how to build a text extraction app using Google ML Kit in the Flutter framework. ML Kit provides an easy-to-use API that allows developers to leverage machine learning models for tasks like text recognition. We will create an app that allows users to select an image, perform text extraction on the image, and display the extracted text.

Getting Started: To begin, we need to set up our Flutter project and add the necessary dependencies. We will include the firebase_ml_vision package, which provides the ML Kit functionality for text recognition. After adding the package to our pubspec.yaml file and running flutter pub get, we are ready to start coding.

Building the User Interface: Our app will consist of a single screen with an image display area, buttons for selecting an image and extracting text, and a text area for displaying the extracted text. We will use the ImagePicker package to allow users to select an image from their device's gallery. The UI will be implemented using Flutter widgets like Column, ElevatedButton, Image, and Text.

Performing Text Extraction: Once the user selects an image, we will use the ML Kit API to process the image and extract text. We will utilize the FirebaseVisionImage and FirebaseVisionTextRecognizer classes provided by the firebase_ml_vision package. The image will be converted into a FirebaseVisionImage object, and the text recognition will be performed using a FirebaseVisionTextRecognizer object. We will iterate through the recognized text blocks, lines, and elements to extract the text.

Displaying the Extracted Text: The extracted text will be displayed in a scrollable text area using the SingleChildScrollView widget. We will update the UI with the extracted text using the setState method. Whenever the user selects a new image or triggers the text extraction, the UI will reflect the changes by updating the displayed image and extracted text.

Conclusion: In this article, we have learned how to build a text extraction app in Flutter using Google ML Kit. By leveraging ML Kit’s text recognition capabilities, we can easily extract text from images. We have seen how to set up the project, implement the UI, perform text extraction using ML Kit’s API, and display the extracted text to the user. This app can be a useful tool for various applications such as digitizing documents, extracting information from images, and more. Experiment with different images and explore the possibilities of text extraction with ML Kit in your Flutter projects.

By following the steps outlined in this article, you can create your own text extraction app and further enhance it with additional features and improvements. Happy coding!

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

void main() {
  runApp(TextExtractionApp());
}

class TextExtractionApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text Extraction',
      home: TextExtractionScreen(),
    );
  }
}

class TextExtractionScreen extends StatefulWidget {
  @override
  _TextExtractionScreenState createState() => _TextExtractionScreenState();
}

class _TextExtractionScreenState extends State<TextExtractionScreen> {
  File _image;
  String _extractedText = '';

  Future<void> _pickImage() async {
    final pickedImage = await ImagePicker().getImage(source: ImageSource.gallery);
    setState(() {
      _image = File(pickedImage.path);
      _extractedText = '';
    });
  }

  Future<void> _extractText() async {
    final visionImage = FirebaseVisionImage.fromFile(_image);
    final textRecognizer = FirebaseVision.instance.textRecognizer();
    final visionText = await textRecognizer.processImage(visionImage);
    String extractedText = '';

    for (TextBlock block in visionText.blocks) {
      for (TextLine line in block.lines) {
        for (TextElement element in line.elements) {
          extractedText += element.text + ' ';
        }
        extractedText += '\n';
      }
      extractedText += '\n';
    }

    setState(() {
      _extractedText = extractedText;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Text Extraction'),
      ),
      body: Column(
        children: [
          _image != null
              ? Image.file(
                  _image,
                  height: 300,
                )
              : SizedBox(height: 300),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: _pickImage,
            child: Text('Select Image'),
          ),
          SizedBox(height: 10),
          ElevatedButton(
            onPressed: _image != null ? _extractText : null,
            child: Text('Extract Text'),
          ),
          SizedBox(height: 20),
          Expanded(
            child: SingleChildScrollView(
              child: Text(
                _extractedText,
                style: TextStyle(fontSize: 18),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

The above code creates a text extraction application using Google ML Kit. The TextExtractionScreen class is defined as a StatefulWidget. The _image variable is used to hold the selected image, and the _extractedText variable holds the extracted text. The _pickImage function allows the user to select an image from the gallery. The _extractText function performs text extraction on the image and assigns the extracted text to the _extractedText variable.

To run the application, use the flutter run command. This will load the selected image and perform text extraction, displaying the extracted text on the screen.