Building a Text Recognition App in Flutter: Setting Sail with flutter_tts and Google ML Kit

Ahoy, Flutter adventurers! Welcome to our thrilling journey of building a text recognition app using Flutter. In this video series, we'll chart uncharted waters, exploring the realms of image processing and text recognition. For this initial installment (Video 1), we'll kick things off by setting up our project, creating the app's HomePage, and integrating some essential packages.

Selecting the Right Tools: Meet Our Crew of Packages
Before we hoist our sails, let's meet our trusty crew of packages that will accompany us on this voyage:

flutter_tts: ^3.6.3: This package brings text-to-speech functionality to our app, allowing it to read out recognized text.
google_mlkit_text_recognition: ^0.5.0: Google's ML Kit is our compass for recognizing text within images.
image_picker: ^0.8.7+1: To pick images from the device's gallery or take photos using the camera.
google_ml_kit: ^0.13.0: Google's ML Kit again, but this time for a broader range of machine learning capabilities.
image_cropper: ^3.0.2: This package helps us crop images, ensuring we focus on the text we want to recognize.
cupertino_icons: ^1.0.2: A set of icons designed for Cupertino-style (iOS-style) app design.
google_mlkit_translation: ^0.5.0: For those who dare to venture further, this package offers translation capabilities.
google_mlkit_commons: ^0.2.0: A collection of common utilities for Google ML Kit.
Make sure to include these packages in your pubspec.yaml file.

Setting Up the Main Course: main.dart
Our Flutter adventure begins in the main.dart file. Here's an overview of the setup:

import 'package:flutter/material.dart';
import 'Screens/homePage.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Text Recognition',
      theme: ThemeData(
        primarySwatch: Colors.deepPurple,
      ),
      home: const HomePage(),
    );
  }
}

Creating the HomePage: Our Port of Call
Now, let's anchor at our HomePage in homePage.dart:

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key});

  @override
  _HomePageState createState() => _HomePageState();
}

In the _HomePageState class, we initialize variables for image paths and text blocks. The build method displays a simple screen with the text "Select Image" in the center. Additionally, we add a floating action button (FAB) for image selection.

class _HomePageState extends State<HomePage> {
  String imagePath = "";
  List<TextBlock> blocks = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: const Center(
        child: Text("Select Image"),
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {
          // Logic for image selection to be implemented in upcoming videos.
          showModalBottomSheet(
            context: context,
            builder: (BuildContext context) {
              return Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  ListTile(
                    leading: const Icon(Icons.camera_alt),
                    title: const Text("Camera"),
                  ),
                  ListTile(
                    leading: const Icon(Icons.image),
                    title: const Text("Gallery"),
                  ),
                ],
              );
            },
          );
        },
        label: const Text("Scan"),
      ),
    );
  }
}

Charting the Course
With our initial setup in place, we've cast off the dock and set sail on our Flutter text recognition app journey. Stay tuned for the next video in which we'll delve deeper into image selection and text recognition using these powerful packages.

Feel free to share your thoughts and questions as we navigate these uncharted waters together! 🚢🌊📸

Link: https://youtu.be/0jezBp_M2_M (in Hindi)