Text-to-speech with Flutter
Update: This article was first published on flutter.de, the German Flutter Community platform. You can find it there in German with the extension of “Umlauts in Text-to-Speech”. Find it here: https://flutter.de/artikel/text-to-speech.html
From time to time my five-year-old son approaches me with a piece of paper on which he painted a few letters and asks me to read it out loud to him. Then he laughs, disappears with the note and returns some time later with even more letters. This process can go on for a while.
Since I don’t have that amount of time, I thought to myself: Why not write my son an app, so that in the future I can lie undisturbed on the couch. A good opportunity to try Flutter! The goal: An app where a child can enter letters, numbers and words, which are then read out loud.
With the focus on preschool kids, I tried to make the app as easy to use as possible. The basis is a keyboard with all capital letters, including umlauts. That makes 30 buttons, which can be evenly divided into portrait and landscape view. Above it is a card in which the entered word is displayed. Finally, there’s a button set over it, with which the input can be removed. The prominent FloatingActionBotton triggers the reading.
How do I get the app to talk? Text-to-speech (TTS) is the keyword! Everyone knows the voice of their navigation system. This is provided by the underlying operating system and I wanted to use this app. There are Flutter implementations for almost anything now, so I didn’t search long for this Flutter Text to Speech Package. The integration was very easy, thanks to a sample implementation in the same GitHub repository. You create an instance and give it something to speak out loud.
But two small hurdles had to be taken, before I could hear my app speak:
- iOS must first be asked for access to audio. I helped with a stack overflow response. However, it worked only after a shave in the project structure: rm -rf ios android && flutter create -i swift .
- Android, however, only required the specification to at least version 21: minSdkVersion 21
All I had to do was transfer the entered text to the speak method by means of the FloatingActionButton.
First realization: My app is an American! No problem, because the Flutter Text to Speech package is adaptable. When initializing, you can set a language in addition to speed, volume and pitch. These settings can also be changed at runtime.
Second realization: The app does not want to be interrupted! Every pressing of the speak button will be executed, even if you press it ten times in a row. When a child presses the button 10 times to read the word “fire department”, there is no way of stopping it. That can be pretty annoying for a parent. The opponent of the speak method is the stop method. Like in the example implementation, you can decide if you want the app to stop talking, whenever you want, or when you want to hear a new word. The latter is more suitable for my app.
Conclusion: Great Framework!
It was too easy! I did not expect to reach such a good result so quickly. For the integrating of the TTS functionality alone I expected a day. In all I needed maybe 30 minutes. Also creating a UI with Flutter went smoother than expected. However, I can not recommend the GridView as a component within a page, because it breaks all the layout instructions around it.
Who knows if this app will ever end up in the App Store. But it’s already on GitHub.
