Hi Guy’s Welcome to Proto Coders Point, In this Flutter Tutorial will learn how to empower your flutter application with Speech Recognition feature using which user can convert his speak in to text in your flutter application.

Video Tutorial

Speech to Text in Flutter

Giving a feature like Speech to Text in flutter gives a ability to users to easily interact with application by just their voice.

To achieve this we are going to making use of a flutter package called speech_to_text .

Steps to Implement Speech to Text in Flutter App

1. Create A Flutter Project

In your favorite IDE Start by creating a new Flutter Project by using below command if you are using VSCode

flutter create project_name 

Skip this step if you want to integrated Speech to text in existing project, Simple Open the Flutter project where to want to add this feature.

---

2. Add following flutter depencencies in pubspec.yaml file

Open pubspec.yaml and under depencencies: section add the following line

dependencies:
  speech_to_text:

Then hit below command in terminal

flutter pub get

This will download the speech_to_text package into your flutter project as external library.

To use it simple import it where required example in your flutter project main.dart file.

---

3. Adding Necessary permission

Android:

In Android module of flutter project open AndroidManifest.xml file and add below permission

Flutter Project > android > app > src > main > AndroidManifest.xml

<uses-permission android:name="android.permission.RECORD_AUDIO"/>

Then to make this package work, We need to have minSdkVersion: 24 and targetSdkVersion: 32. To update it goto build.gradle file

Flutter Project > android > app > build.gradle

iOS:

Same in iOS also we need to permission to access iPhone or iPad device microphone.

Open Podfile, and look for flutter_additional_ios_build_settings(target) and below code in it.

target.build_configurations.each do |config|
     config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] || = [
     '$(inherited)',
     # dart: PermissionGroup.microphone
     `PERMISSION_MICROPHONE=1`,
]
end

Then open Info.plist and inside <dict> </dict> block, add below lines

Flutter Project > ios > Runner > Info.plist

<key> NSMicrophoneUsageDescription </key>
<string> microphone </string>

---

Flutter initState ask user mic permission

Now we need to add user permission to grant access to use Microphone immediately as our flutter app launch.

SpeechToText speechToText = SpeechToText();

The initState() method is overridden to call CheckMic() method and initialize the microphone availabilty.

@override
  void initState() {
    // TODO: implement initState
    super.initState();
    checkMic();

  }

void checkMic() async{
    bool micAvailable = await speechToText.initialize();

    if(micAvailable){
      print("MicroPhone Available");
    }else{
      print("User Denied the use of speech micro");
    }
  }

---

Flutter Speech listener

SpeechToText speechToText = SpeechToText();

speechToText.listen(
        listenFor: Duration(seconds: 20),
        onResult: (result){
        setState(() {
                   textSpeech = result.recognizedWords;
                    isListening = false;
             });
         }
  );

The above code makes use of listen() method that comes in speech_to_text package and start the recording.

Here we have 2 properties listenFor: Specifies the duration the mic to listen to the speech, then the recording speech is stored in onResult result parameter which we can used as result.recognizedWords to convert the speech to text in flutter.

Complete Source – Flutter Speech to Text

main.dart

import 'package:flutter/material.dart';
import 'package:speech_to_text/speech_to_text.dart';
import 'package:speech_to_text/speech_to_text_provider.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(

        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  var textSpeech = "CLICK ON MIC TO RECORD";
  SpeechToText speechToText = SpeechToText();
  var isListening = false;

  void checkMic() async{
    bool micAvailable = await speechToText.initialize();

    if(micAvailable){
      print("MicroPhone Available");
    }else{
      print("User Denied th use of speech micro");
    }
  }


  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    checkMic();

  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SingleChildScrollView(
          child: Column(
            children: [
                Text(textSpeech),

                GestureDetector(
                  onTap: () async{
                    if(!isListening){
                      bool micAvailable = await speechToText.initialize();

                      if(micAvailable){
                        setState(() {
                          isListening = true;
                        });

                        speechToText.listen(
                          listenFor: Duration(seconds: 20),
                          onResult: (result){
                            setState(() {
                              textSpeech = result.recognizedWords;
                               isListening = false;
                            });
                          }
                        );


                      }
                    }else{
                        setState(() {
                          isListening = false;

                          speechToText.stop();
                        });
                    }
                  },
                  child: CircleAvatar(
                    child: isListening ? Icon(Icons.record_voice_over): Icon(Icons.mic),
                  ),
                )
            ],
          ),
        ),
      ),
    );
  }
}

Similar Tutorials

Text Recognition Using Firebase ML Kit – Text Recognition in Android