Flutter – Extract Data From an Image to Text
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; }); } |