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

1. Create a new Flutter project:

   flutter create image_to_text
   cd image_to_text

2. 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.

1. Create a Firebase project:

• Go to the Firebase Console.
• Create a new project.

1. Add your Android app to Firebase:

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

1. 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'

1. Enable ML Kit on Firebase:

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

Step 3: Implement UI

1. 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

1. Run the app on an emulator or physical device:

   flutter run

Step 5: Test the Output

1. Pick an image:

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

1. Extract text:

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

1. 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

Related Articles

• How to make Ludo app in Flutter with Source Code Step by step
• How to make PDF Reader app in Flutter with Source Code Step by step
• How to make QR Scanner app in Flutter with Source Code Step by step
• How to Make a ToDo App with Flutter with source Code StepWise in 2024
• What is package in Flutter (Dart) with example in 2024
• What is class in Flutter(Dart) with example step by step
• Advantage of Flutter with examples in 2024
• Top 15 Amazing Applications Built with Flutter Framework
• Specialized PDF reader designed specifically for music sheets
• Flutter File Integrity Checker app for checking integrity of a file
• Christmas Quote Generator app built with flutter source code
• Create fast food orders and bundle it up into a QR code with flutter
• How to make custom BottomNavigationBar in flutter with source code