In this Blog, we will implement voice search in flutter.
In today’s world, everyone wants that the mobile application which they are using should be more attractive and contain more features.
Voice Search is one of the most important feature which makes any application more responsive and interactive with the user.
In this blog, I’ll explain the flutter implementation of voice search.
You may also check our Flutter app development page.
Let’s begin the code implementation of voice search in flutter:-
Step 1:-Add dependencies
In your pubspec.yaml file, add the following dependency.
It is a flutter voice search package.
|
1 |
flutter_speech: ^2.0.0 |
Step 2:-Code Impementation
For the code implementation, first of all, you need to add the following method and call it in your initState method.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
void activateSpeechRecognizer() { print('_MyAppState.activateSpeechRecognizer... '); _speech = SpeechRecognition(); _speech.setAvailabilityHandler(onSpeechAvailability); _speech.setRecognitionStartedHandler(onRecognitionStarted); _speech.setRecognitionResultHandler(onRecognitionResult); _speech.setRecognitionCompleteHandler(onRecognitionComplete); _speech.setErrorHandler(errorHandler); _speech.activate('fr_FR').then((res) { setState(() => _speechRecognitionAvailable = res); }); } |
Now, we need to create all these handler methods. So, let’s make them one by one.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
void onSpeechAvailability(bool result) => setState(() => _speechRecognitionAvailable = result); void onRecognitionStarted() { setState(() => _isListening = true); } void onRecognitionResult(String text) { print('_MyAppState.onRecognitionResult... $text'); setState(() => transcription = text); } void onRecognitionComplete(String text) { print('_MyAppState.onRecognitionComplete... $text'); setState(() => _isListening = false); } void errorHandler() => activateSpeechRecognizer(); |
All the above methods will handle the multiple cases.
Now, we need to create the methods which will we call on the button click on start, stop, cancel.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
void start() => _speech.activate(selectedLang.code).then((_) { return _speech.listen().then((result) { print('_MyAppState.start => result $result'); setState(() { _isListening = result; }); }); }); void cancel() => _speech.cancel().then((_) => setState(() => _isListening = false)); void stop() => _speech.stop().then((_) { setState(() => _isListening = false); }); void onCurrentLocale(String locale) { print('_MyAppState.onCurrentLocale... $locale'); setState( () => selectedLang = languages.firstWhere((l) => l.code == locale)); } |
That’s great, now we will call these methods on button clicks.
Add all these methods in your build method as shown below.
|
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 |
@override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: const Text('SpeechRecognition'), actions: [ PopupMenuButton<Language>( onSelected: _selectLangHandler, itemBuilder: (BuildContext context) => _buildLanguagesWidgets, ) ], ), body: Padding( padding: EdgeInsets.all(8.0), child: Center( child: Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.stretch, children: [ Expanded( child: Container( padding: const EdgeInsets.all(8.0), color: Colors.grey.shade200, child: Text(transcription))), _buildButton( onPressed: _speechRecognitionAvailable && !_isListening ? () => start() : null, label: _isListening ? 'Listening...' : 'Listen (${selectedLang.code})', ), _buildButton( onPressed: _isListening ? () => cancel() : null, label: 'Cancel', ), _buildButton( onPressed: _isListening ? () => stop() : null, label: 'Stop', ), ], ), )), ), ); } List<CheckedPopupMenuItem<Language>> get _buildLanguagesWidgets => languages.map((l) => CheckedPopupMenuItem<Language>( value: l, checked: selectedLang == l, child: Text(l.name), )) .toList(); void _selectLangHandler(Language lang) { setState(() => selectedLang = lang); } |
Now the code implementation is done. It’s time to check the output.
Step 3:-Output
check the below-attached video for the output.
you can see that initially, it will ask for the microphone permission. Allow it.
Now, you can see the voice searching output.
Congratulations!!!! you have learned how to implement voice search in flutter.
For more details, you can refer to the official doc of flutter here.
For more interesting blogs check out here – https://mobikul.com/blog/
Hope this blog helped you with a better understanding that how to implement voice search in flutter?
Thanks for reading.😇