Implement Voice Search in Flutter

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.

  flutter_speech: ^2.0.0

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.

  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);
    });
  }

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.

  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();

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.

  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));
  }

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.

  @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);
  }

@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.😇

Vandana Sharma 1 May 2023

. . .

Discuss on Helpdesk

Implement Voice Search in Flutter

Step 1:-Add dependencies

Step 2:-Code Impementation

Step 3:-Output

Leave a Comment Cancel Reply

Message Sent!