How to convert speech to text in a Flutter Application
This year, mobile applications continued to become more and more popular. Fortunately there are many programming tools available to developers who want to create them. Among these tools there is Flutter, which has distinguished itself lately.
What is Flutter?
Flutter is a free and open-source mobile UI framework created by Google and released in May 2017. In a few words, it allows you to create a native mobile application with only one codebase. This means that you can use one programming language and one codebase to create two different apps (for iOS and Android).
Flutter consists of two important parts:
- An SDK (Software Development Kit): A collection of tools that are going to help you develop your applications. This includes tools to compile your code into native machine code (code for iOS and Android).
- A Framework (UI Library based on widgets): A collection of reusable UI elements (buttons, text inputs, sliders, and so on) that you can personalize for your own needs.
- To develop with Flutter, you will use a programming language called Dart. The language was created by Google in October 2011, but it has improved a lot over these past years.
To Convert Speech to Text we will be using dart package listed below:
- speech_to_text: ^3.2.0 : A library that exposes device specific speech recognition capability. This plugin contains a set of classes that make it easy to use the speech recognition capabilities of the underlying platform in Flutter. It supports Android, iOS and web. The target use cases for this library are commands and short phrases, not continuous spoken conversion or always on listening.
- flutter_tts: ^3.0.0 : A flutter plugin for Text to Speech. This plugin is supported on iOS, Android, Web, & macOS.
To get idea basic idea about what we are going to develop kindly go through below gif image.
Define a commonly used variables and controllers like a below:
final SpeechToText speech = SpeechToText();
bool _hasSpeech = false;
bool speechTest = false;
bool _isAnimating = false;
bool isMatchFound = false;
String lastError = "";
String lastStatus = "";
String lastWords = "";
PersistentBottomSheetController _controller;
AnimationController _animationController;
GlobalKey<ScaffoldState> _key = GlobalKey();
dynamic languages;
FlutterTts flutterTts;
TtsState ttsState = TtsState.stopped;
double volume = 0.5;
double rate = 0.5;
double pitch = 1.0;Create a initSpeechState() with a code snippet like a below:
Future<void> initSpeechState() async {
bool hasSpeech = await speech.initialize(
onError: errorListener,
onStatus: statusListener,
debugLogging: false,
);
if (!mounted) return;
setState(() {
_hasSpeech = hasSpeech;
});
}Now we need to create a another function initTts() like a below:
initTts() {
flutterTts = FlutterTts();
_getLanguages();flutterTts.setStartHandler(() {
setState(() {
ttsState = TtsState.playing;
});
});flutterTts.setCompletionHandler(() {setState(() {
ttsState = TtsState.stopped;
});
});flutterTts.setErrorHandler((msg) {
setState(() {
ttsState = TtsState.stopped;
});
});
}
Create a _getLanguages() like a below:
Future _getLanguages() async {
languages = await flutterTts.getLanguages;
if (languages != null) setState(() => languages);
}Now our initState() will have a code snippet like a below:
@override
void initState() {
// TODO: implement initState
super.initState();
initSpeechState();
_animationController = AnimationController(
vsync: this,
lowerBound: 0.5,
duration: Duration(seconds: 3),)..repeat();
initTts();
}Create necessary Listener like a below
void errorListener(SpeechRecognitionError error) {
setState(() {
lastError = "${error.errorMsg} - ${error.permanent}";
});
}To check whether text is being listened or not we will have a statusListener() with a code snippet like a below:
void statusListener(String status) {
if (status == "listening") {
} else if (status == "notListening") {
_animationController.reset();
_isAnimating = false;
}
}we need to create one more resultListenerCheck() like a below:
void resultListenerCheck(SpeechRecognitionResult result) {
if (!speech.isListening) {
resultListener(result);
}
}resultListener() will return another function like a below:
void resultListener(SpeechRecognitionResult result) {
_animationController.reset();
_isAnimating = false;
_controller.setState(() {
});
if (speech.isListening) {
return;
} else { lastWords != null && lastWords.length > 0 && !speech.isListening &&!isMatchFound;///lastWords="Sorry No Match Founds";
isMatchFound = true;
_speak("sorry we can not found any match! please try again");
}
}
Now we need to create _speak() with a below code snippet.
Future _speak(String message) async {
if (Platform.isIOS) {
volume = 0.7;
} else {
volume = 0.5;
}
await flutterTts.setVolume(volume);
await flutterTts.setSpeechRate(rate);
await flutterTts.setPitch(pitch);if (message != null) {
if (message.isNotEmpty) {
var result = await flutterTts.speak(message);
if (result == 1) setState(() => ttsState = TtsState.playing);
}
}
}
Our startListening() will have a code snippet like a below:
void startListening() {
_animationController.addListener(() {
setState(() {});
});//_animationController.forward();_animationController.repeat(period: Duration(seconds: 2));
_isAnimating = true;
lastWords = "";
lastError = "";
isMatchFound = false;
int listenForSeconds = 10; if (Platform.isIOS) {
listenForSeconds = 5;
}
Duration listenFor = Duration(seconds: listenForSeconds);
speech.listen(onResult: resultListenerCheck, listenFor: listenFor);setState(() {
speechTest = true;
});
}
Our build method will have a code snippet like a below:
@override
Widget build(BuildContext context) {
return Scaffold(
key: _key,
resizeToAvoidBottomInset: false,
body: Padding(
padding: const EdgeInsets.only(
left: 15,
right: 15,
top: 30,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
GestureDetector(
onTap: () {
getBottomSheet(context);
startListening();
},
child: Image.asset('assets/images/mike.png',
height: 120,
width: 200,
),
),
Text(
"Tap on Mike to Convert Your Speech to Text", textAlign: TextAlign.center,
style: Theme.of(context).textTheme.caption.copyWith( fontSize: 18,
color: Colors.black,
fontWeight: FontWeight.w700,
),
)
],
),
),
);
}
Get complete code from https://github.com/Kalpesh209/flutter_voice_recording_to_text
Please feel free to ask any help related to Flutter or anything related to this repository. Your suggestions will help us to improve much better.
Still Need a Support a for Flutter Development ?
Warm Regards,
Kalpesh Khandla
