#3 Image to Text in Flutter App (Flutter Series by Akshit Madan)

Hey there, this is Akshit and in this module we are going to see how you can implement Image to Text model in your Flutter App using ML Vision Kit by Firebase.

  1. Connect your App to Firebase

main.dart

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
brightness: Brightness.light,
primaryColor: Colors.purple,
debugShowCheckedModeBanner: false,
home: ImagetoText(),
);
}
}

image_to_text.dart

In this class define a Scaffold with a floating action button which triggers getimagefromgallery() function in which an image is picked from gallery using image_picker package.

getimagefromgallery() async {    
var tempstore = await ImagePicker.pickImage(source: ImageSource.gallery);

setState(() {
pickedfile = File(tempstore.path);
imageloaded = true;
text = '';
});
readtextfromimage();

Now readtextfromimage() function will run

The TextRecognizer class of Firebase ML Vision Kit processes the image and reads the text present in image in the form of blocks which is a set of lines. A line is further a set of elements. An element contains words , so using nested for loops all the words can be diffrentiated and printed in the Text widget with a separation of space for diffrentiating one word from another.

readtextfromimage() async {FirebaseVisionImage myimage = FirebaseVisionImage.fromFile(pickedfile);TextRecognizer textRecognizer = FirebaseVision.instance.textRecognizer();VisionText readtext = await textRecognizer.processImage(myimage);for (TextBlock block in readtext.blocks) {      for (TextLine line in block.lines) {          for (TextElement word in line.elements) {              setState(() {              text = text + ' ' + word.text;
});
}
}
}}

Now lets see how the widget tree and the whole file looks like ..

Output

Thanks for reading…😉

--

--

Flutter Developer | ML | AR

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store