How to Create Image to Text App in Flutter with source code stepwise

Creating an image-to-text app in Flutter involves using Optical Character Recognition (OCR) technology to extract text from images. Here’s a step-by-step guide to building this app, including the necessary code snippets.

Step 1: Set Up Flutter Project

Create a new Flutter project:

   flutter create image_to_text
   cd image_to_text

Add necessary dependencies in pubspec.yaml:

   dependencies:
     flutter:
       sdk: flutter
     image_picker: ^0.8.4+2
     firebase_ml_vision: ^0.9.7
     path_provider: ^2.0.2

Run flutter pub get to install the dependencies.

Step 2: Set Up Firebase for ML Kit

To use the firebase_ml_vision package, you need to set up Firebase in your Flutter project.

Create a Firebase project:

Go to the Firebase Console.
Create a new project.

Add your Android app to Firebase:

Download the google-services.json file and place it in the android/app directory.

Configure the Android app:

Modify android/build.gradle: dependencies { classpath 'com.google.gms:google-services:4.3.8' }
Modify android/app/build.gradle:
gradle apply plugin: 'com.google.gms.google-services'

Enable ML Kit on Firebase:

In the Firebase Console, navigate to the “ML Kit” section and enable the Vision API.

Step 3: Implement UI

Create a basic UI in lib/main.dart:

   import 'dart:io';

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

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

   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: ImageToText(),
       );
     }
   }

   class ImageToText extends StatefulWidget {
     @override
     _ImageToTextState createState() => _ImageToTextState();
   }

   class _ImageToTextState extends State<ImageToText> {
     final picker = ImagePicker();
     File? _image;
     String _extractedText = "";

     Future<void> pickImage() async {
       final pickedFile = await picker.pickImage(source: ImageSource.gallery);
       if (pickedFile != null) {
         setState(() {
           _image = File(pickedFile.path);
         });
         extractText(_image!);
       }
     }

     Future<void> extractText(File image) async {
       final FirebaseVisionImage visionImage = FirebaseVisionImage.fromFile(image);
       final TextRecognizer textRecognizer = FirebaseVision.instance.textRecognizer();
       final VisionText visionText = await textRecognizer.processImage(visionImage);

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

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

       textRecognizer.close();
     }

     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text('Image to Text Converter'),
         ),
         body: Center(
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
               ElevatedButton(
                 onPressed: pickImage,
                 child: Text('Pick Image'),
               ),
               SizedBox(height: 20),
               _image != null
                   ? Image.file(_image!)
                   : Container(),
               SizedBox(height: 20),
               Text(_extractedText),
             ],
           ),
         ),
       );
     }
   }

Step 4: Run the App

Run the app on an emulator or physical device:

   flutter run

Step 5: Test the Output

Pick an image:

Press the “Pick Image” button to select an image from the gallery.

Extract text:

The app will display the image and extract text from it using Firebase ML Kit.

Check the output:

The extracted text will be displayed below the image in the app interface.

Step 6: (Optional) Improve the App

Add functionality to take a photo using the camera.
Handle edge cases, such as no text detected or permission denied.
Improve UI/UX with better styling and layout.
Add the ability to save or share the extracted text.

This basic app allows users to pick an image from their device, use Firebase ML Kit to extract text from the image, and display the extracted text.

Output

Here’s the output image showing how the Flutter app might look on a mobile device. Image to Text App in flutter

Post Views: 31