Flutter Speech to Text App Tutorial | Voice Recognition

» Flutter courses, writeups, and source code on Launch Club 🧠
drp.li/Iq9Bk
» Flutter Job Board 👋
drp.li/T9bLq
This Flutter tutorial will teach you how to integrate speech to text capabilities into your app using your device’s microphone and highlight certain words.
» Remember to like, subscribe, comment, and share this video! 🚨
kzbin.info?sub_...
» Socials📱
GitHub: github.com/MarcusNg
Twitter: / marcuslng
» Resources 📁
Source Code: github.com/MarcusNg/flutter_v...
speech_to_text package: pub.dev/packages/speech_to_text
highlight_text packages: pub.dev/packages/highlight_text
avatar_glow package: pub.dev/packages/avatar_glow
» Timestamps 🕒
00:00 Introduction
00:48 pubspec.yaml
01:12 iOS and Android Permissions
01:55 main.dart
02:17 Speech Screen
2:55 Glowing Floating Action Button
3:50 Displaying Text + Highlighted Text
5:02 Listening Logic
5:58 Thanks for watching!
» Music 🎶
Joakim Karud ( / joakimkarud )
#Flutter #FlutterSpeech #FlutterVoice

[@muhammadfaizan2461]

Simple and straight to the point, really love this video

[@Avalanche034]

So excited to see this you are making some fantastic content

[@SaidElnaffar]

Loved it- liked, subscribed, and shared!

[@sinhhungwin]

Great content. Plus, your voice is so smooth!

[@mamadytraore614]

Awesome video. Thank you sooooooo much! Loved and subscribed!

[@bejanoamer4728]

your channel is gold mate. Thanks from Washington DC

[@vinipachecov]

Awesome content! Subscribed and please keep rocking!

[@gabrielowusu1927]

I always love your content❤❤.

[@tsioryfitiavanaanhykrishna6992]

You are the best bro ! Subscribed!

[@bruceliang6154]

omg, i been looking for this so long! thank!!!!!!!!!!!!!!!!!!!!!!

[@coucoutier]

Very good tutorial ! What a wonderful language that flutter is !

[@AlexGhiurau]

Dart is the actual language

[@wilsonowilson4298]

That intro was smoooooth

[@robidahariansyah4360]

thankss you, this is helped my project

[@santoshsah1393]

This video was really helpful

[@bezelnarrow3799]

Hay lắm a ơi ^^ Đa tạ ạ !!

[@hdalank]

Subscribed !!

[@bburningpirate7087]

Thankyou so much

[@hboleto]

Awesome explanation Marcus, helped me a lot. I have one question, it is possible to highlight words that the user said when the confidence level is bellow 50% ?

[@ademilsonsantanadasilva8961]

awesome content

[@davidtantz]

Simple and straight

[@chafroudtarek9392]

keep going man

[@letmeflutter6644]

thank you

[@atuldev5772]

Yo man much love from India

[@LikeLuluLikeLulia]

Hi, thank you for this video! I was wondering what is the use case for this kind of app with this plugin? At the beginning, I wanted my app to have this speech-text functionality, so I was looking for tutorial and trying it in my app. But then I realized our phone already has a button on the bottom-right ride of the keyboard that can record voice/speech and show it to Text field, so if we just have a text field in the app, user can still use speech for inputting text, and in this way, if any text is wrong, you can modify the text with keyboard, so can you tell me why we use this plugin? what are practical usage of this? Thank you!

[@hbv8560]

Hello Marcus. Thank you for your video. Can you please make video on search page with search bad and different communities boxes on bottom? Thank you

[@trapscripting8475]

Hey Marcus, please do us a scroll view that loads more content on scroll... Such that it fetches more content only when required. Thank you

[@user-kr9xy4hr2n]

Awesome

[@TheTomdeaf]

Can we use another audio input than a microphone? I need to connect to videos or radio audio files.

[@amankwahkingsley9139]

Hello I really enjoy your videos. Can I get the tutorials on how to setup vscode for flutter

[@varunlohade383]

fan!

[@venkateshn3956]

thanks for the video, is there a way to get word confidence score.

[@umitcelik5508]

When the machine said like you hawe to like. 😂

[@youcefbenabed4895]

I just want to know what is the meaning of the confidence value, what is used for?

[@kadirfurkancaybas580]

Hello , great tutorial still. I wonder, Can we add this a punctation ?

[@danieleangelini6238]

First OF ALL my appreciated for that video awesome! but mic of simulator don't recognized mic how to fix ?

[@ismaelramos4518]

How can I edit the text in case I make a mistake? and how can I put it in a textformfield? help me please great video!!

[@taariqmansurie]

how do we save the text which is converted from speech recently to firebase and then reflect it back again ? as I want to save it for my notes and store it in the firebase storage and display the notes in the application itself.......thank you in advance

[@prateekdixit3819]

I am getting dart analysis error that "the named parameter ' visualDensity' isn't defined" How do i solve this

[@DDOCTORGaming]

Is their a way to save the spoken text in a document inside firestore? thanks

[@__________________________6910]

Great

[@garyjanosz9218]

Code runs without errors, but I get a message on my phone that flutter_voice has stopped. I enabled microphone permissions for flutter_voice, but that was not the problem. Does anybody have any ideas? I compared my AndroidManifest.html to your archived file and they are the same, but mine displays the error warnings in the top right corner of the manifest window.

[@semnick2223]

does anyone know how to fix this error? W/Gralloc3( 8715): mapper 3.x is not supported

[@aprendiendoaprogramar4984]

✔✔✔ Greetings, thanks for sharing your knowledge, I don't know if you know any method to navigate between screens using voice. If possible please provide a tutorial on how to do it. Thank you!

[@peoncup7641]

Hey! If I would like to use a .wav file, and convert it to text, could use this API or would I need to go down another route?

[@sucifebryani2256]

hello marcus, if i listening then i pause first, and I want to continue the text again, how is that?

[@kadirhakan-le3sz]

Thanks very much for the video. How can I do this in the form of constant listening? Or how can I run it in the background as an assistant application? Thank you again.

[@clementbabaniyi]

Wow. cool

[@joebilly9408]

With Flutter you could create the opposite of this text app Means we are adding text output is audio

[@leonardkabasa1902]

Its works well but what if i wanted to increase the duration of the _islistening do I put it at the duration at the end of the val.confidence or at the beginning of the islitening false ?

[@maxmustermann7954]

hey great tutorial, works neatly. Is there a way to trigger the voice recoginition automatically so the user does not have to press a button at all? Similiar to amazons "hey alexa".

[@anmolbindra1]

Great Help but small problem - I see a red screen for 1 sec once i press the mic button and then it displayes the speech to text. any idea why a red screen. 2) the mic turns off after 2 seconds automatically in android but the avtarglow dosen't.

[@willyjean9137]

Make a video on how to use Text To Speech using google api voices please.

[@vidy9754]

brilliant video. Short precise and a GREAT way to ask users to subscribe. Almost played to perfection. i only have one question... where is that variable "val" coming from? can you explain plz?

[@tigeruppercut2000]

They are lambdas functions, meaning they're anonymous functions that are declared on the spot, because you don't really need to declare a whole entire function just to print something in those cases. onStatus, onError etc are events that passes in one string variable, which in this case is "val". And the value is just simply printed out the console log or whereever

[@gaganraj6707]

how to add a list of words which need to be highlighted?

[@quratulain9835]

how to work flutter_tts pkg in flutter when app is in background or phone is locked?

[@MrNiceseb]

After cloning and trying it out on Simulator, why 50% words are not converted, I deliberately slowed down speech and still not working ? Anyone else had same issue?

[@animeshbanerjee4379]

Hey mate .... When it converted speech to text then we can save those texts in local so that we can see those texts letter ? Bt how to save those spoken texts in local storage ? Love from INDIA 🇮🇳

[@getintocode505]

It will never enter into the else block, then how isListening will be set to False.

[@kidcae]

Is there any reason why right before i talk it goes to the red screen error and then quickly fixes itself and shows the text? Also, my emulator is not nearly as fluid as yours but my machine is a monster. Why is this app lagging so bad?

[@shailenderpal4072]

Can we store this text somewhere or copy maybe?

[@CANCANAKON]

Hi,how we can change language? Is it possible?

[@loydvincentbutron4345]

were planning to create app like this but not in english language

[@santoshsah1393]

Will you make video on Torrent Search Api with Flutter

[@ricardomudinyane5038]

Thank you so much for this sir. Can you please help me understand why a little pause in talking stop the recording ?

[@siddheshdikonda8828]

And how to resolve this problem so that it will work smoothly even we take pause while speak

[@md.naymurrahaman7510]

How to Do it Please help me Anyone (This will display a multi-language list in a dropdown list before providing voice. Then I will do voice-over and then convert to that language.)

[@Ainigma]

What is the intro song called?

[@zsthegreat5534]

Can't we save that text?? Is it possible??

[@wemplatform1951]

Can you tell me. WE can put audio msg in Flutter Listener false condition. like if voice no recognition . msg come . you speak wrong or any other language. plz tell me i am waiting for your message.

[@shinigami4228]

How can I make it run everytime in back end ?

[@haidangquang867]

hi everyone. how to config it with other language

[@ViciussBr]

Is there a way to make it continues ? It works but if the user doesn't speak after a few second then the app wont listen to their speech anymore.

[@praveenpravin9881]

[@shinjou2]

Hi I am new to Flutter. I need help. I downloaded the code and did a flutter put get. I got an error saying the app is using a deprecated version of Android embedding. How to migrate this app to the V2 embedding? Thanks.

[@GoldenLionKempo]

SpeechRecognitionError msg: no-speech in chrome. Any idea what this message means

[@sm-ih4jz]

Is it possible when I want the speech and text in Arabic ?

[@nativeworld0]

can it works on offline too??

[@lilasrinivasreddy]

will this work in offline/no internet mode?

[@MohamedElsayed-co8wv]

how search in vsc

[@nanusha3030]

its showing me unhandled exception : missing plugin exception, what should i do to resolve it.

[@crazymusicnetwork8844]

can you resolve it?

[@MrIMacro]

Could you please show us how to make this app support Arabic voice recognition?

[@y_a_n_y_ilufungula2044]

Hi is there any offline one ?

[@akaankshkanchanapalli1171]

Hi, I get ListenFailedException in my iOS device in console when i try to listen. Any ideas how to fix it?

[@akaankshkanchanapalli1171]

@@MarcusNg okay thank you 😊

[@clementbabaniyi]

RangeError (index): Invalid value: Valid value range is empty: -1 After copying ur code

[@aqifmontana9886]

Hey man i downloaded it from the github repository and it didn't work as it should,, it showed me the red widget error you talked about. Also than words would apear but not the entire chat only the word you just spoke. Also the Mic icon didnt reset itself when you finished talking and you had to double click the mic icon to talk again. Idk maby this happend becouse the package versions or libraries have updated and work differently somehow. Anyway after some hours of tuning i finally got it to work properly. So for anyone whose code didn't work try mine : The main.dart : import 'package:avatar_glow/avatar_glow.dart'; import 'package:flutter/material.dart'; import 'package:highlight_text/highlight_text.dart'; import 'package:speech_to_text/speech_to_text.dart' as stt; import 'dart:async'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Voice', debugShowCheckedModeBanner: false, theme: ThemeData( primarySwatch: Colors.red, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: SpeechScreen(), ); } } class SpeechScreen extends StatefulWidget { @override _SpeechScreenState createState() => _SpeechScreenState(); } class _SpeechScreenState extends State { final Map _highlights = { 'flutter': HighlightedWord( onTap: () => print('flutter'), textStyle: const TextStyle( color: Colors.blue, fontWeight: FontWeight.bold, ), ), 'voice': HighlightedWord( onTap: () => print('voice'), textStyle: const TextStyle( color: Colors.green, fontWeight: FontWeight.bold, ), ), 'subscribe': HighlightedWord( onTap: () => print('subscribe'), textStyle: const TextStyle( color: Colors.red, fontWeight: FontWeight.bold, ), ), 'like': HighlightedWord( onTap: () => print('like'), textStyle: const TextStyle( color: Colors.blueAccent, fontWeight: FontWeight.bold, ), ), 'comment': HighlightedWord( onTap: () => print('comment'), textStyle: const TextStyle( color: Colors.green, fontWeight: FontWeight.bold, ), ), }; stt.SpeechToText _speech; Timer _timer; bool available; bool _isListening = false; String _text = 'Test'; String _displaytext = 'Hi this is Voice Recognition ,, you said:'; double _confidence = 1.0; @override void initState() { super.initState(); _speech = stt.SpeechToText(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Confidence: ${(_confidence * 100.0).toStringAsFixed(1)}%'), ), floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat, floatingActionButton: AvatarGlow( animate: _isListening, glowColor: Theme.of(context).primaryColor, endRadius: 75.0, duration: const Duration(milliseconds: 2000), repeatPauseDuration: const Duration(milliseconds: 100), repeat: true, child: FloatingActionButton( onPressed: _listen, child: Icon(_isListening ? Icons.mic : Icons.mic_none), ), ), body: SingleChildScrollView( reverse: true, child: Container( padding: const EdgeInsets.fromLTRB(30.0, 30.0, 30.0, 150.0), child: TextHighlight( text: _displaytext, words: _highlights, textStyle: const TextStyle( fontSize: 32.0, color: Colors.black, fontWeight: FontWeight.w400, ), ), ), ), ); } void _error() { available = false; _speech.stop(); _timer = new Timer(const Duration(milliseconds: 1000), () { setState(() { _isListening = false; }); }); } void _listen() async { if (!_isListening) { available = await _speech.initialize( onStatus: (val) => print('onStatus: $val'), onError: (val) { _error(); print('onError: $val');}, ); if (available) { setState(() => _isListening = true); _speech.listen( onResult: (val) => setState(() { _text = val.recognizedWords; if (val.hasConfidenceRating && val.confidence > 0) { _confidence = val.confidence; _displaytext += " ${_text}"; } else { setState(() {_isListening = false;}); } }), ); } } else { setState(() {_isListening = false;}); _speech.stop(); } } }

[@souravrahman4245]

hello .. i copied your code and it is not working properly.after speaking for first time it is not taking my speech.can you help me please

[@user-mz3xq2il8r]

dose this work in arabic langauge

[@smilingreshmi]

great tutorial 👍🏼 i have a question, is the voice input added into an array ? if not, in which one line indicates the result (voice input) because i want use the input to send to another API ?

[@mahmoudkhalil4691]

do you want to use that input in translator API?

[@smilingreshmi]

@@mahmoudkhalil4691 yes and also another api to rhyme the last word said in that sentence.

[@mahmoudkhalil4691]

Could you please send to me how to do it logically? If you know

[@rezwansaki]

Does it work in offline?

[@ashleyshaw5076]

For app or websites ?

[@asifullah8488]

how to do this using java

[@daeeki]

Hi Marcus, thank you so much for the awesome contents! I was able to create the app and it works but I'm keep getting the following error in the console "RangeError (index): Invalid value: Valid value range is empty: -1" Any idea why I'm getting this error?

[@cerensahin6327]

I got that error too. The problem is with the highlighting process. I couldn't solve the problem but instead just got rid of the highlighting process. Now the app works but without a highlighting function.

[@mazekaty]

support arabic speech ?

[@clemkonan]

Do I have to be a programmer? I want to be able to use speech to text as I interview clients so that I do not have to worry about my typing speed and I would like to do this with my Android phone.

[@jorgemarcelo4708]

Hey clem, you can find some apps on the appstore to help you with that! I searched for "voice text" and found a few of useful ones such as "voice notebook". Cheers!

[@shubham5578]

I am unable to import speech_to_text package it shows error like this: pub get failed (65; ╵) exit code 65

[@aqifmontana9886]

It is so becouse you pubspec.yaml is not well formated : Copy paste this and replace.. Than hit pub get dependencies: flutter: sdk: flutter # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^0.1.3 speech_to_text: ^2.3.0 highlight_text: ^0.7.2 avatar_glow: ^1.2.0

[@KienTran-ox4wg]

hi, you know, after a brief pause of speaking, the status will change to not listening. Are there any ways to make it listen permanently until clicking the button again?

[@evacareclinic]

Hello, did you find an answer?

[@atiqurrahman6213]

Hey Marcus I got this error, onError: SpeechRecognitionError msg: error_network, permanent: true I tried to find the issue but could'nt , can you help me here ? Thank you

[@mehmetcancesur3326]

i am getting the same error , did you solve ?

[@solomon2291]

I'm getting " I/flutter (10621): onError: SpeechRecognitionError msg: error_network, permanent: true " . Any one knows what could be the problem ? Many thanks

[@mehmetcancesur3326]

i am getting the same error , did you solve ?

[@badsanta8604]

​@@mehmetcancesur3326 Package not works on emulator. Try on device.

[@user-fp8mq5em2y]

speech_to_text is not compatible with Mobile web browsers.

[@jeenusjunanio2400]

Hey! will this app work offline?

[@samuelyao2637]

Hiii Marcus how can I enable continuous listening on Android with this speech_to_text on flutter?

[@evacareclinic]

Did you find a solution?

[@cosmos269]

Hi, my app work fine as a apk file but it not recognize any words in emulators app why it is... It's very time taking to create apk ever time... How did your emulator shows the words spoken by you...

[@Mr.Watsonn]

mine too for this reason i test the app in real device

[@cerensahin6327]

@@Mr.Watsonn did it work then?

[@Mr.Watsonn]

Apk build yaptıktan sonra gerçek cihazda test edince oluyor evet.