Flutter Speech To Text App Step-by-Step Tutorial. Flutter Voice Recognition App iOS and Android.

hi everyone welcome back to my channel in this video I'll be talking about how to create this speech to text application in flutter so in this app as soon as user press the mic button it will start listening and it starts to print the result on the screen as soon as user stop speaking it will stop listening automatically as you can see here and it will also provide the percentage confidence or accuracy you can say so if you are new on this channel make sure to subscribe the channel for further updates with new coding videos and also I request you to please watch this video without skipping it so that there will not be any chance of error or mistake and you will end up creating this app with the feat feature successfully so without any delay let's get started right after this [Music] intro so here this is my main function and I have removed all the boiler plate codes so that we can start from the same stage you can also do that and here what I'm going to do I'm just going to create a folder and I'll give it name as pages and inside this I'll create a DOT file by the name homecore page and it would be a state full widget homepage let me import the package and here instead of this placeholder I'll be using SCA fold let me import this package now I'll use your [Music] abar SAR and inside this has a property title and it will take widget so I'm passing here text widget and inside this let me give a title to text now inside main function as home I'll pass this homepage so let me run this hopefully you will see white screen with abar title meanwhile let me go to pubd so here I'll search for package which is speech to text this is the package let me copy this and it is still running so go to your pup spec yaml paste it do not consider these packages I was making for my another projects you need to paste only this speech to text package and then pubget package is installed and here you can see that and also my app is running and here I want to provide some color to the app bar background color colors let me provide it to blue gray control save and also I want my title to be in Center so Center title will be good okay and after installing package we need to add the few permission so first of all we'll see with iOS permissions we will go inside iOS folder and then Runner and this info p list here we will have to add two permissions as per the package is concerned if you will check down there you will see that these two per missions you need to add for iOS setup first one is NS speech recognition usage description and another one is NS microphone usage description so let's add this let me add here after this so this will be a key and along with that you will have to add proper string that why you want this permission so will so you will have to add here proper description so inside this string tag I'll add property string so that user can understand so oration required to record audio for speech to text recognition app that's it and I'll just copy paste once again for another permission and is microphone users description let me copy this permission required same here you can change your text according to your requirement so let me close this and for Android setup we'll go inside this Android I'll put the package link and GitHub Link in my description you can check that and for Android permissions you will have to go inside Android folder and then app SRC Main and this Android manifest and if you'll check this package there are several permission you need to add so copy this and here control V and your permissions are added now let's run the app to check whether there is some issue or not so it it is running successfully no issues only my permissions for IOS and Android is added and the last thing we need to check is inside this app and this build grel make sure that Min SDK version is 21 and now I'm just going to run the application so it is running without giving error so we are about to start coding for space to text recognition app so let me close all these folders and this iOS folder and now I'll move towards this homepage so so this page is connected to my main I'm directly calling my homepage and I'll start coding right from this page so first of all I will initialize speech to text class so that it can recognize my speech and it will convert my speech into text so for this final speech to text speech text and initialize it I'm creating here init State function because we will have to initialize after that I'm creating one function in it speech and it would be a sync kind of function which will initialize my speech to text class and it will return Boolean value I'm creating one more Boolean valuable by the name speech enable initially it will false and inside this in speech function I'm going to add this speech enabled so whenever my speech to text initialize will provide any value like true or false it will be initialized and when we will run our application so initially it will be false and according to the response of this it will be true or false after that I'll call set state so that our UI will be updated and inside this in it State I'll call this function in it is spee so after doing these few lines of code if you will run the application so let me run this so you will get this dialogue asking for recording audio for now obviously we will be selecting while using the app so we have accepted the permission for audio recording now we will move forward to implement other part of this application so after installing installing all the package and doing setup we will create a function which will start to listen users voice so for that it will be vo it will return vo and I'll provide name of this function like start listening and it would be a sync kind of function so I'll use here a wait speech to text then Dot listen and the listen function is going to expect us to pass a call back function on result so it will handle the result of uh Speech to Text plugin in whatever it will provide after recording basically requires a function as a result which is provided by the package so what we will do we will create here another function so it will handle the result from the package whatever it will provide as a speech to text value on speech result we will have to create parameter result and now we will pass this function as a call back on speech result so whatever our result would be like uh what we are trying to achieve here whatever we will speak it will convert into text so this kind of functionality we will handle inside this function so here inside this function we will have to call set State because as far as we will start to speak at the same time it will take our voice and it will convert our speech into text now I'm going to create string variable word spoken so why I have created this string because it will store our text whatever we will speak basically you can say that it will store the word after transcribed by the package so if I'm saying hello so my device is accepting my voice as hello and this hello as a text will be stored here so that is why I have created this now I will make use of it so now let's come inside this set state so whatever string variable that we that I have created word spoken so I'm going to initialize it with the result result dot recognize words so with this we are restoring our result in word spoken variable and now I'm going to fetch the result percentage actually result accuracy percentage which is also Prov ided by this package so for this it is in percentage so I'll use here double let me initialize it with 0 for now 0.0 and here after my actual result I'll use conf confidence percentage will be equal to result dot confidence so now till we are getting the result of my voice whatever we will speak in front of our device and also the percentage it will also provide with this actually we are ready to start listening and we are ready to call this function actually start listening so for that we will have to go inside a scaffold and make some UI designs for that as you can see I have already added my app bar just to give some text color you can add Here style text style color colors do white it will look better and as the body of the SC F I'll be using Center widget because I want my content result result percentage everything in the center so Center and Center will take a child and as a child I want to Prov provide here column and as we all know that column will take multiple wigets that is why children and inside this children I'll use container and as a child of container I want to show the text so I'll be using sorry I'll be using text widget and as a text for this widget I'm using I'll have to apply some condition so on behalf of this speech to text it is coming from here speech to text if it is listening then my text would be listening like this otherwise if [Music] speech enable it is coming from here speech enable then it will be showing have the micro phone to start listening otherwise suppose if you do not allow any permission or for any other condition we will say error fetching speech so let me align this so this is the condition now if I'll run this so initially the value is false speech to enable that is why I'm getting this error fetching speech but uh this is not like that uh because we are calling this function in it speech and our speech to text do initialize it is actually returning false that is why it is coming inside this error fetching speech that is not the expected thing it should come inside this condition tap the microphone to start listening because we have made all the changes uh in Android manifest and package install so let me check whether there is some error yes it is so this is the [Music] error platform exception so if you will search this error and for this you will have to add this line in your Android manifest just after this permissions and then rerun your application and now let's see whether we get the same error or some different error we want this text because we have given all the permissions each and everything so it may come inside this Meanwhile my app is running so I just want to request you please like this video And subscribe to my channel and for the source code and package link check the description I will paste all the things there now my application is running now there is no error and yes it is coming inside this tap microphone to start listening after this all uh I will have to create another method which is wide stop listening it will also be a sync kind of method some spelling error stop listening I'm creating this stop listening method so that on press of my microphone button I can start or stop listening users voice so inside this a wait speech to text do stop and after that I'll be calling set State and here in this start listening function also we'll have to add this set state so that it will update our UI once it will start listening or stop listening that is why I'm adding set State and inside that when it will start listening we need to update our confidence percentage which will be zero initially 0.0 that's it now I'll create microphone button on pressing of that user will input voice so it would be better to take Floating Action button so I'm adding here Floating Action button and its type will be floating action button and it has required property on press this is my button and as a child we can provide here icon icons do mic and we can apply here condition also so speech to text if it is not listening then mic will be off otherwise icons do mic mic will be on same as for onpress condition if my speech to text Dot is not listening then I'll call this stop listening function otherwise guys it will start listening let me save this yes you can see here the icon mic icon initially it is off and I want to provide some styling here also this text is moving up towards app bar so let me provide here some padding padding of 15 would be better and I also want to provide text styling font size would be 20 it will provide result like this and it will be easy to read for the users last two things are left and that is our result to be printed here and after that the confidence percentage there is one condition error in inside this Floating Action button instead of this speech to text is not listening we should use is listening then it will stop listening otherwise it will start listening and also want to make one correction let me remove these print statements it is here previously it was recognized word we will have to use recognized words otherwise it will not provide result so make sure to type the text here correctly otherwise we will end up with wasting our time and after that after this container this padding I want to provide confidence percentage before that I want to provide our textt whatever we are speaking so here I'll be using container and as a child I'm using here text and my text would be word spoken so it is coming from here whatever we are speaking it is saving inside word is spoken and this set state is updating our UI and also I'll provide some styling font weight 500 and color color would be colors. black now let's run this and let's check whether it is providing the text or not I'm going to press this mic floating button hello are you listening this is testing 1 2 3 this as you can see here it is provided in the text whatever I am speaking in front of my device some text size or font size font size would be 20 not is looking good actually 25 would be better and we need to apply some padding so container has already a parameter which is called padding padding of [Music] 15 so this is my result and after that I want to print confidence level which is also provided by the package that we have installed so for that I'll have to apply some condition because I want to show the percentage once we are providing the input so spe these two text when it is not listening and confidence percentage is greater than zero then text to be confidence and and dollar sign curly Braes inside that small small bra and here confidence percentage multiplied by 100 dot two string and let me also provide some styling so style text style and font size would be 20 and F weight would be do bold you can make uh the UI as per your requirements so now let me save this as you can see here it is giving percentage I don't want this extra numbers here so for that two that's fixed and after decimal I want one digit now it is providing 87.3% of accuracy now let me run this once again so now when I will tap on this microphone it will start to listen and it will print our result whatever we are speaking here and once I'll stop speaking then it will stop accepting the voice and microphone will be off as you can see it is off and it is also showing the con confidence percentage so that's it in this video and just want to tell you through this uh project please subscribe to my channel and like this video If you find this video helpful it gives motivation for making such videos and that's it in this video hope to see you next time in next video bye for now

Channel: thecodeme

Views: 268

Keywords: Flutter, FlutterApp, Dart, SpeechToText, VoiceRecognition, MobileAppDevelopment, AppDevelopment, iOSDevelopment, AndroidDevelopment, FlutterTutorial, MobileDevelopment, Programming, TechTutorial, VoiceTech, AI, ArtificialIntelligence, VoiceInput, TextOutput, DeveloperCommunity, CodeTutorial, LearnFlutter, YouTubeTutorial, SoftwareDevelopment, SpeechRecognition, VoiceApp, CodingTutorial, FlutterDev, AppDev

Id: 6C5huwIO-z8

Length: 32min 59sec (1979 seconds)

Published: Sun Mar 17 2024