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.
flutter create image_to_text |
Step 2. Add Required Packages
From pub.dev add required packages to your ‘pubspec.yaml’ file under dependencies.
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
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.
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 .
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;
} |
onTap: () async { final XFile? image =
await picker.pickImage(source: ImageSource.gallery);
String a = await getImageTotext(image!.path);
setState(() {
s = a;
});
}
|