Flutter Text Recognition (OCR) Tutorial | Extract Text From Image Flutter Guide

in today's video I'm going to be showing you guys how to implement text recognition capabilities within your flutter application text recognition is a process by which we can extract text form images our application is going to have the following functionality we'll be able to click The Floating Action button which is going to direct us towards the gallery of our phone and then we can select an actual image which has some text within it and then the algorithm is going to go ahead and deduce what the actual text is within this image so in the case of the stop sign it's telling us that it detected the letters St o within this image if I click on this and I use a much more complicated example like a picture of a poem as you can see it went ahead analyzed the picture and then produced an output for us stating all of the words that it found within the actual image before we get started we need to take a look at all of the dependencies that we're going to be using to build our project and the two for this video are going to be Google mlkit text recognition which is the actual package we're going to be using to perform our text recognition and then also the gallery picker package which is going to allow us to actually pick images and and access our phone's Gallery so to get started let's first copy the Google ml text recognition package come back to our pope.l file and then under dependencies I'm going to go ahead and paste this and once this is done the next thing that I'm going to be doing is also picking up the gallery picker copying it and coming back and pasting it again so now that this is done the next thing that we're going to be doing is taking a look at how we're going to be setting up the iOS Android side of things in terms of the settings that we have to configure before we can run our actual application as a side note links to all of the resources that I mentioned within this video as well as a link to the source code can be found in the description below so feel free to take a look at it if you're confused at any point so now that this is done the first thing that we're going to be doing is tackling the iOS side of things so for that I'm going to open up the iOS folder and then I'm going to go to the Pod file folder here we're going to be uncommenting the line which says platform iOS 12.0 and once this is done you can save the Pod file the next thing that we're going to be doing is coming down to the point where we see post install stuff for our pods as you can see here here and then we're going to be adding some code here you can come to the actual page for the flutter ml kit text recognition by Google and then you can actually copy the code from here the same way that I am doing it and then again links to all of the resources will be down in the description below so I'll copy this first chunk of code come back and within my post install block I'm going to be pasting it and then doing command save and then after this is done for the next code block which is here what we're going to be doing is actually adding this within this code block for psor project. targets. like so and then doing command save and that's pretty much it so this is all of the stuff that we have to do for iOS side of things so now that we have the actual project configured correctly to work with the ml text recognition the next thing that we're going to be doing now is actually taking a look at the settings that we have to do for gallery picker when it comes to iOS so the only thing that we have to do for the gallery picker to work is basically add the appropriate permissions to our info. pist file so for that what we're going to be doing is going to our iOS folder we're going to come to Runner and then open up the info. pist file once this is done I am going to be copying all of these permission Clauses by clicking on this clipboard icon and then I'm going to be coming back and I will paste this after here where it says key and then the string so here I'm going to be pasting it in and doing command save so in terms of the setup of iOS now we are done so now that this is done we can close down the iOS side of things and come to Android so for Android the process is going to be pretty similar as well the first thing that we're going to be doing is taking a look at all of the settings that we need to do for the ml kit text recognition package to work so for this I'll scroll down to where it says Android then the first thing we have to do is come to our app build.gradle and here we are going to be changing some things so the minimum SDK version in this case has to be 21 as specified here and then the target s version I'm going to be setting that to 34 you can do 33 as well just depends upon you but it has to be more than whatever is listed here once this is done I'm also going to go ahead to the compile SDK version which is going to be under the Android tag here and I'm going to be setting this to 34 as well and do command save and that's pretty much all we had to do so the last thing that now we're going to be doing is actually going to our Android app Main and then the Android manifest.xml file and then we are going to be adding some permission Clauses to our Android manifest.xml file so that the gallery picker works correctly on Android as well so again I'll scroll down to where I can see the actual permissions which are these three so I'll copy the first one and I'm going to paste this before the application tag here and then once this is done I'm going to paste in two other ones which are the read media images and read media video because I am targeting Android SDK 33 or above and then paste these in as well so with this done that's pretty much all we had to do so now we've configured our application to work on IOS and Android correctly we have the correct permission setup we've added the correct dependencies so everything should work as intended and there isn't anything that's going to cause issues for us as you can see so the next thing that I'm going to be letting you guys know is that this is an optional step that you can do if you want to actually Implement text recognition that is going to be for letters that are other than Latin so for example if you want to perform text recognition on Chinese and there are steps here that you need to do in order for the Chinese text recognition to work same for Japanese Korean or deari so for example if you want to do text recognition on Japanese you'll have to copy this specific line of code and then paste it within your iOS pod file and then same goes for Android but since we're only going to be doing Latin character based text recognition this is not important for us so now that this is done all of the actual setup is done so what I am going to be doing is closing everything down then coming to my actual lip folder coming to main. file and just giving my application a test run to make sure that everything works as intended so I'm going to start debugging the application and keep in mind since this is the first time that we have installed the packages and are building our application so it might take a bit longer but just let the application build and once the application is running on the simulator I will resume the video so now that the application is running correctly on my Android simulator we can proceed but before we can actually proceed with the development there's another thing that I wanted to let you guys know and that is that if you want to actually test the text recognition capabilities on an actual iOS simulator I believe that is not going to be possible because the actual mlkit text recognition package that we're using only supports a 64-bit architecture so to test this you will have to plug in an actual iOS device into your computer and then select that and actually debug your application on that so with this said that's why we're using an Android Simulator for the purposes of this tutorial but the actual coding logic is going to be the same regardless of Android or iOS so now that our application is running I am going to open up my homepage which is a stateful widget that has a scaffold being returned for the build function with an app bar added to it and that's pretty much it so we're going to be implementing all of the logic from scratch the first thing that I'm going to be doing is implement the logic so that we can actually select an image that we want to perform the text recognition on so to get started with that the first thing that I'm going to be doing is creating a variable which is going to be of type file and we're going to import this from IO and it's going to be optional and it's going to be the selected media so the file that we have actually selected when we opened our Gallery once this is done the next thing that I'm going to be doing is coming back to my scaffold and adding a floating action button to it by setting The Floating Action button property to a new instance of a floating action button for the onpressed call back function I'll leave that to be empty for now and then do command save then I will just add an icon as a child to The Floating Action button which is which is going to be icons. add so that we can see it more clearly and then now we can proceed to actually implementing the actual Crux of the functionality of selecting a media file so to do this the first thing that I'll do is I'll mark the onpress function call back to be as Senus and once this is done I'm going to say that we're going to have a list of media file that are going to be returned to us and this actual media file class is going to come to us from the gallery picker package so I'll import that and then I'm going to say that this is going to be an optional variable I'm going to say this is going to be called our Medias and then I'm going to be setting this equal to await and then Gallery picker Dot and I am going to do pick media like so then we have to give it the build context which I'm already passing and then after that I am also going to be giving it the property single media to be true that we are only going to be selecting one image from our gallery and then do command save so now that this is done what I'm going to be doing is quickly testing the this functionality out so if I click on the plus button it should open up the gallery for me it should ask me for the appropriate permissions because we've added those Clauses to our Android manifest.xml I'll do allow all and now we can actually browse our gallery and actually select an image so now that we are selecting an image the next thing that I want to do is actually save this image in our variable which is selected media so to do this what I'm going to be doing is firstly making sure that our media is not equal to null and then I'm also going to be adding another Clause where I'm going to do media do is not empty so if this is true and this has to be is not empty then we can actually proceed and what I'm going to be doing is creating a variable called data and I'm going to be setting this equal to await media and then dot the first element from the list like so and then call the get file function on it which returns a future file so that's why I'm adding an evate call so that we save the file into the data variable now that this is done the next thing that I'm going to be doing is calling the set State function and within set state I'm going to set the selected media variable equals to data so now that this is done I am going to select the button and then I am going to select an image and now everything's working as intended so the next step that I want to do is actually show this selected media file in the UI so to do that what I'll do is that firstly I'm going to come to my scaffold and I'm going to say that for the body attribute for the stold it's going to be a call to a function called build UI then I will come to the bottom of my class and I'll say that we will have a function which will return a widget called build UI open it up and do the following the first thing that I'll do is that I'll say that we are going to be returning a column it's going to have children's list and for now it's going to be empty I'm going to define the main axis size main axis alignment and cross AIS alignment for my column and then for the children the first child within this column is going to be a call to a function called image view then I will do the same thing as we had done before where I'll create another function which will return a viget called image View and then I'll open it up like so and here is what we're going to be doing if our selected media is equals to null so if our selected media is null then what we're going to be doing is we're going to be returning a center widget which a child which is going to be text and it's going to say pick an image for text generation and if this is not the case then what I'm going to be doing is actually returning a center widget and I'm going to say that the child for this is going to be image. file and then the file here is going to be our selected media now I can add an exclamation mark to it because I know this value is not going to be null because I've already perform the null check here and once this is done the next thing that I'm going to be doing is setting the width for this to be 200 and do command save so now you can see that the actual image is being shown to us so now if I actually restart my application completely you're going to see that since we've restarted application for now we haven't selected a media file it says pick an image for text generation I click on it download select one of these so let's do this one and as you can see the image is now being displayed so now that this is done the next thing that we're going to be doing is implementing the actual logic to extract the text from this so to do that the first thing that I'm going to do is come back to my column and I'm going to say that I'm going to have another child for this column which is going to be our extract textt view widget and then what I'll do is that I will come and I will say like I had done before for my image view that I'm going to have a function which is going to return a widget and it's going to call extract text View and then within this I am going to be performing some calculations before we do anything so the first thing that I'm going to be doing is making sure that if the selected media is null then what I'm going to be doing is returning a center widget which a child text which says no result for now and do command save and if that is not the case then for now we'll return a container and do command save so now that this is done I will restart my application and since our selected media is empty we're seeing no result once we select the media then it's going to change and show the image to us like so and the no result is going to disappear since now we're just returning an empty container so before we can proceed any further we need to actually implement the actual function function which is going to help us to extract text from our image so to do that what I'll do is that I will say that I'm going to create a function which will return a future and it's going to return a optional string and then I'm going to say that it's going to be called underscore extract text and it's going to take in a file like so and then I'm going to say that this function will be a strink and open up its body here the first thing that I'm going to be doing is creating a variable called text recognizer and it's going to come from the text recognizer package and this text recognizer class is going to come from our Google mlkit text recognition package so I'll create a new instance of our text recognizer and instantiate and then I'm going to be actually passing a script property here to define the actual characters upon which we are going to be performing our text recognition on by default we're going to be supporting Latin characters so I'm going to do text recognition script. Latin but if you want to add other text recognition capabilities such as Chinese then I recommend that you go to the Google mlkit text recognition packages documentation and read what you have to do if you want to add other languages text recognition capabilities it's going to be fairly simple and then you can change the actual text recognition script to something else so now that we've defined our text recognizer the next thing that we need to do is actually Define the input that our text recognizer is going to work upon so for that I'll say that I'm going to create another final variable I'm going to say that this is going to be input image this type also comes from the same package as our text recognizer and then I'm going to say that this variable will be called input image set this equal to input image image input Dot from file and then give it the file that gets passed into this function and command save now that this is done the next thing that I'm going to be doing is creating another variable and this is going to be of type recognized text I'm going to say that it's going to be recognized text I'm going to be setting this equal to in a weade call where I'm going to be using my text Rec izer text recognizer do process image and then passing it the input image like so and doing command save this is going to go ahead and perform the text recognition process on our input image using the text recognizer and then it's going to save the result within our recognized text variable so the last thing that I'm going to be doing is creating a new variable of type string called text and setting it equal to recognize text Dot and then I'm going to do do text like so and then I'm going to close my text recognizer to save on resources and prevent a memory leak and finally I will return the text like so and do command save so now that our actual extract text function has been defined properly all we have to do is use this somehow within our UI pass it the file that we want to extract the text from and then show that information since this is a function that returns a future of an optional string type I can use a widget called a future Builder to actually work with this function so to do that what I'll do is that I I'll come to my extract text View function I'll replace the returning container call with something else and now I'm going to do that I'm going to return a future Builder the future Builder is going to take in a future the future in this case will be a call to the extract text function and I'm going to pass the selected media file as the input to this function and then the Builder function defines how we're going to be building the actual widget so here we are going to get two things pass to us the first is context and the next is Snapshot so I'll open up my function block and and here we are going to be just returning a text widget and then the data in this case is going to be the snapshot. data and since we're going to be returning an optional string data is can be null so what I'm going to do is use a null of your operator and then set that to be an empty string and then once this is done I will add another comma and here I'm going to Define some styling for my text which is going to be just the phone size and then I'm going to add a semicolon once this is done before I do command save or anything like that I will restart my application and I will do command save so now let's test our actual text recognition capabilities I will click on the plus button I will go to the gallery select a specific image let's see stop it's going to go ahead and you can see that it's going to extract the text from the image and display it here if I click on a new image such as this one as you can see it extract Ed the text properly from this image it says clouds it is hot the sky is blue a little Cloud comes looking for you more clouds come they bring rain sing and dance it's cool again so everything appears to be working as intended so that's pretty much it for today's tutorial I hope that you enjoyed and learned a thing or two about text recognition within flutter if you have any question comments or concerns feel free to leave them down in the comments below and I'll try my best to answer them for you and as always stay happy stay healthy keep learning keep growing and I'll see you guys in the next video bye-bye

Channel: Hussain Mustafa

Views: 1,536

Keywords: image to text flutter, optical character recognition, image to text, flutter text recognition with camera, flutter text recognition, flutter ocr scanner, flutter ocr ml kit, flutter ocr app, flutter text extract text from image, flutter image to text, flutter tutorial, flutter, ocr app flutter, ocr scanner app flutter, text recognition flutter, extract text from image flutter, read text from image flutter, flutter ocr text recognition, text extract from image, ocr tutorial

Id: SgwLU55R14s

Length: 18min 27sec (1107 seconds)

Published: Thu Feb 01 2024