Before starting the blog topic Google ML-KIT In Flutter, let’s discuss ML-KIT first. Machine-Learning Kit is a mobile SDK that brings machine-learning expertise to native as well as hybrid apps. ML-KIT comes with predefined ready-to-use APIs, that can be used by anyone who does not have deep knowledge of machine learning.
With the help of Google ML-KIT, we can perform various operations that can enhance or beautify the overall experience of the application. In this blog, we will discuss text recognition from an image with the help of Google ML-KIT In Flutter. Let’s explore, how we can implement the ML-KIT in Flutter with mentioned steps.
You can also explore our Flutter app development company page.
1. Create the App
First of all, we need to create a new app.
|
1 |
flutter create mlkitdemo |
2. Adding Google ML-KIT Package
Now we will add the ml-kit package in our pubspec.yaml folder inside our flutter project. I have added the following package, you can also add the updated version.
|
1 |
google_mlkit_text_recognition: ^0.11.0 |
3. Adding package for Image
Now, according to our use case, we can use multiple types of packages for getting the image. In our demo, we used an image from the Gallery.
For accessing the gallery, we have used the image picker package:
|
1 |
image_picker: ^0.6.3+4 |
4. Now, we will initialize some required variable
|
1 2 3 4 5 6 7 8 9 10 11 |
final ImagePicker picker = ImagePicker(); /// ImagePicker Controller XFile? image; /// To store picked image String? finalString; /// To store Recognised String from image bool? isLoading; /// To show the loader while fetching the image |
5. Create a Button to Select the image and export all Strings.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
Padding( padding: const EdgeInsets.symmetric(horizontal: 30.0), child: ElevatedButton( onPressed: () async { setState(() { isLoading = true; }); /// To show loader image = await picker.pickImage(source: ImageSource.gallery); /// To choose image from gallery and store in "image" String a = await getImageToText(image!.path); /// Export all strings from choosed image setState(() { finalString = a; isLoading = false; }); /// To hide loader }, child: Row( mainAxisAlignment: MainAxisAlignment.center, children: const [ Icon( Icons.camera_alt_outlined, ), SizedBox( width: 5.0, ), Text("Tap me to Choose Photo") ], )), ), /// TO EXPORT STRINGS FROM SELECTED 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; } |
6. Show Selected Image and Exported Text
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/// SELECTED IMAGE if (image != null) Image.file( File(image?.path ?? ''), fit: BoxFit.fill, height: MediaQuery.of(context).size.height / 4, width: MediaQuery.of(context).size.width / 1.5, ), /// EXPORTED STRING Text( finalString ?? '', style: const TextStyle(color: Colors.black, fontSize: 16), ) |
7. Full Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
import 'dart:io'; import 'package:flutter/material.dart'; import 'package:google_mlkit_text_recognition/google_mlkit_text_recognition.dart'; import 'package:image_picker/image_picker.dart'; class TextFromImageDemo extends StatefulWidget { const TextFromImageDemo({Key? key}) : super(key: key); @override State<TextFromImageDemo> createState() => _TextFromImageDemoState(); } class _TextFromImageDemoState extends State<TextFromImageDemo> { final ImagePicker picker = ImagePicker(); XFile? image; String? finalString; bool? isLoading; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Google ML-KIT Text Recognition'), centerTitle: true, ), body: Stack( children: [ Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ if (image != null) Image.file( File(image?.path ?? ''), fit: BoxFit.fill, height: MediaQuery.of(context).size.height / 4, width: MediaQuery.of(context).size.width / 1.5, ), const SizedBox( height: 20.0, ), Padding( padding: const EdgeInsets.symmetric(horizontal: 30.0), child: ElevatedButton( onPressed: () async { setState(() { isLoading = true; }); image = await picker.pickImage(source: ImageSource.gallery); String a = await getImageToText(image!.path); setState(() { finalString = a; isLoading = false; }); }, child: Row( mainAxisAlignment: MainAxisAlignment.center, children: const [ Icon( Icons.camera_alt_outlined, ), SizedBox( width: 5.0, ), Text("Tap me to Choose Photo") ], )), ), const SizedBox( height: 20.0, ), Text( finalString ?? '', style: const TextStyle(color: Colors.black, fontSize: 16), ) ], ), ), Visibility( visible: isLoading == true, child: const Positioned( child: Center( child: CircularProgressIndicator(), ), )) ], ), ); } 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; } } |
>> Here is the output app result of our app:
This is a basic example of text recognition through ML-KIT. You can perform multiple operations through Google ML-KIT.
Hope this blog helps you to use Google ML-KIT In Flutter.
For more information, please go through the Google ML-KIT Text Recognition and Google Ml-KIT docs.