Building Voice Recognition App using Flutter Speech-to-Text Plugin

Integrating speech recognition capabilities into mobile apps has become increasingly important in the era of voice assistants and voice commands. With its cross-platform framework, Flutter offers a convenient way to develop voice recognition features for users on both Android and iOS devices.

This tutorial will explore using the Flutter Speech to Text plugin to build a voice recognition app. We will discuss the Flutter plugin's features and step-by-step implementation and provide code snippets throughout the blog post.

Understanding the Flutter Speech-to-Text plugin

Before building our voice recognition app, let's take a moment to understand the Flutter Speech to Text plugin and its capabilities.

The Speech to Text plugin is a library that exposes device-specific speech-to-text recognition capability. It provides classes that make it easy to utilize the speech recognition features of the underlying platform in a Flutter app. The plugin currently supports Android, iOS, and web platforms.

However, it's important to note that the plugin is primarily a voice assistant designed for handling commands and short phrases rather than continuous speech conversion or always-on listening.

Here's an overview of the platform support for the plugin:

• Android: ✅
• iOS: ✅
• MacOS: ✅
• Web*: ✅
• Linux: ✘
• Windows: ✘

To learn more about the Flutter Speech to Text plugin and its recent updates, we can refer to the official package README file.

Implementing the Speech Recognition Feature

To implement the voice command recognition feature in our Flutter app, we need to follow these steps:

1. Add the speech_to_text dependency to our pubspec.yaml file.
2. Request permission for microphone access.
3. Handle the permission response.
4. Initialize the speech recognition object.
5. Check if speech recognition is available on the device.
6. Start the speech recognition process.
7. Handle the recognition results.
8. Stop the speech recognition process.
9. Clean up and dispose of the speech recognition object.

Let's go through each step in detail.

Step 1: Add the speech_to_text dependency

First, we need to add the speech_to_text dependency to our pubspec.yaml file. Open the file and add the following line under the dependencies section:

Copy
speech_to_text: ^6.5.1

Save the file and run the command flutter pub get to fetch the package.

Step 2: Request permission for microphone access

We need to request the necessary permissions to access the device's microphone. Add the following code snippet inside your widget's class:

Create an instance of speech_to_text.SpeechToText, which we'll use to request microphone permission. Then, define a method getMicrophonePermission that checks if the app has permission to access the microphone. If not, it requests permission and returns a boolean indicating whether it was granted.

Step 3: Handle the permission response

Next, we need to handle the permission response. Add the following code snippet inside your widget's class:

This method receives the boolean value indicating whether the microphone permission was granted. You can handle the logic here based on your app's requirements. For example, you can show an error message to the user or prompt them to grant permission manually through device settings.

Step 4: Initialize the speech recognition object

Now, let's initialize the speech recognition object. Add the following code snippet inside your widget's class:

This method calls the getMicrophonePermission method to check and request the microphone permission, and then it calls handlePermissionResponse to handle the permission response.

Step 5: Check if speech recognition is available

Before starting speech recognition, checking if the device supports it is essential. Add the following code snippet inside your widget's class:

This method checks if the speech recognition feature is available on the device using isAvailable from the speech recognition object.

Step 6: Start the speech recognition process

To start the speech recognition process, add the text to speech following code snippet inside your widget's class:

This method starts the speech recognition by calling the listen method from the speech recognition object. It receives a callback onResult that provides the recognized spoken words. Additionally, we specify listenFor to set a timeout for the recognition process.

Step 7: Handle the recognition results

The recognized speech can be handled as desired. In the previous code snippet, we printed it to the console. You can modify the code to meet your specific use case. For example, updating the UI with the recognized words, triggering specific actions, or sending the speech to a natural language processing service for further processing.

Step 8: Stop the speech recognition process

To stop the speech recognition process, add the following code snippet inside your widget's class:

This method calls the stop method from the speech recognition object, which stops the ongoing speech recognition process.

Step 9: Clean up and dispose of the speech recognition object

Finally, cleaning up and disposing of the speech recognition object is important when we're done using it. Add the following code snippet inside your widget's class:

This method calls the cancel method from the speech recognition object, which cancels the ongoing recognition process. It's good practice to call this method when we're finished with the speech recognition feature to clean up any resources.

Using the Voice Recognition Feature

Now that we have implemented the voice recognition feature let's see how we can use it in our Flutter app.

To start the speech recognition, we can call the startSpeechRecognition method. For example, we can trigger the start of the audio speech recognition process when a button is pressed:

Similarly, we can stop the speech recognition process when another button is pressed:

Remember to clean up and dispose of the speech recognition object when we're done using it. We can call the disposeSpeechRecognition method in the dispose method of our widget:

Conclusion

This tutorial explored building a voice recognition app using the Flutter Speech-to-Text plugin. We learned how to add the plugin to our project, request microphone permission, handle the permission response, initialize the speech recognition object, start and stop the recognition process, record audio, handle recognition results, and dispose of the speech recognition object.

By implementing the voice recognition feature, you can add a powerful and intuitive user interface and experience to your Flutter app. The possibilities are endless, whether it's voice commands, speech-to-text input, or voice-controlled features!

Remember to refer back to the official documentation and dive deeper into integrating the Flutter Speech-to-Text plugin to explore its full capabilities. Happy coding!

import 'package:speech_to_text/speech_to_text.dart' as stt;

// ...

stt.SpeechToText speech = stt.SpeechToText();

Future<bool> getMicrophonePermission() async {
  bool hasPermission = await speech.initialize(
    onError: (error) => print('Error initializing speech recognition: $error'),
  );

  if (!hasPermission) {
    bool isPermissionGranted = await speech.requestPermission();

    if (!isPermissionGranted) {
      print('Microphone permission not granted');
    }

    return isPermissionGranted;
  }

  return true;
}

// ...

Future<void> handlePermissionResponse(bool isPermissionGranted) async {
  if (isPermissionGranted) {
    // Permission granted, continue with voice recognition
    // ...
  } else {
    // Permission not granted, show error message or ask the user to grant permission manually
    // ...
  }
}

// ...

Future<void> initializeSpeechRecognition() async {
  bool isPermissionGranted = await getMicrophonePermission();
  await handlePermissionResponse(isPermissionGranted);
}

// ...

bool isSpeechRecognitionAvailable() {
  return speech.isAvailable;
}

// ...

void startSpeechRecognition() {
  speech.listen(
    onResult: (result) => print('Recognition result: ${result.recognizedWords}'),
    listenFor: Duration(minutes: 1),
    cancelOnError: true,
  );
}

// ...

void stopSpeechRecognition() {
  speech.stop();
}

// ...

void disposeSpeechRecognition() {
  speech.cancel();
}

// ...

ElevatedButton(
  onPressed: () {
    if (isSpeechRecognitionAvailable()) {
      startSpeechRecognition();
    } else {
      // Speech recognition not available, show error message or alternative
      // ...
    }
  },
  child: Text('Start Listening'),
),

// ...

ElevatedButton(
  onPressed: stopSpeechRecognition,
  child: Text('Stop Listening'),
),

// ...

@override
void dispose() {
  disposeSpeechRecognition();
  super.dispose();
}