Text To Speech Converter Using Flutter

Hello guys,

Today we are going to develop application that convert text to speech using flutter. For this we are going to use Flutter tts package. You can get more information about this package in following link.

Text To Speech

For video tutorial you can go through this.

First you have to add dependency of tts into pubspec.yaml as below

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.3
  flutter_tts: ^1.2.6 # add this line

Now for android you have to change minSdkVersion to 21 as below.

defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId "com.tejsumeru.texttospeech"
        minSdkVersion 21
        targetSdkVersion 28
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
    }

For ios, there is some documentation given in official site given above you can check that one.

Now Some default structure we are using is same as previous post you can check that one. Now first you have to create object of FlutterTts as below.

final FlutterTts flutterTts = FlutterTts();

Now inside build method we first design the screen with one textfield and one button as below.

@override
Widget build(BuildContext context) {

  TextEditingController textEditingController = TextEditingController();

  _speak(String text) async{
    print(await flutterTts.getLanguages);
    await flutterTts.setLanguage('en-US');
    await flutterTts.setPitch(1);
    await flutterTts.speak(text);
  }

  return Container(
    alignment: Alignment.center,
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: TextFormField(
            decoration: InputDecoration(
              hintText: 'Enter Something To Speak',
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(10),
                borderSide: BorderSide(
                  width: 2,
                  color: Colors.deepOrange
                )
              )
            ),
            controller: textEditingController,
          ),
        ),
        RaisedButton(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(8),
            side: BorderSide(width: 2,color: Colors.deepOrange)
          ),
          child: Text('Press this button to say HELLO',style: TextStyle(
            fontSize: 20,
            color: Colors.white
          ),),
          onPressed: () => _speak(textEditingController.text),
          padding: EdgeInsets.all(20),
          color: Colors.deepOrange,
        ),
      ],
    )
  );
}

We are using TextFormField() which is used to create text-field and decoration is used to give dynamic desisgn of the textfield. Inside TextFormField(), we are using controller which takes object of TextEditingController. Whenever the user modifies a text field with an associated TextEditingController, the text field updates value and the controller notifies its listeners. Listeners can then read the text and selection properties to learn what the user has typed or how the selection has been updated. textEditingController.text gives the text inside textfield which is received by _speak method.

In button onPressed action we are calling _speak() method which is define inside _HomeState class. Here flutterTts.speak() method is used to play audio of text, we can set different language for speak audio. For that purpose we can use flutterTts.setLanguage(), and inside this we can use different code which is given by package provider. To know different types of language code we can print those code by using flutterTts.getLanguages.

You can set pitch of the voice if it is not perfect. Pitch must be between 0.5 to 1.5. you can set pitch using setPitch() method.

Here is the full source code.

import 'package:flutter/material.dart';
import 'package:flutter_tts/flutter_tts.dart';

void main() => runApp(TToS());

class TToS extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('Text To  Speech'),
          backgroundColor: Colors.deepOrange,
        ),
        body: _Home(),
      ),
    );
  }
}

class _Home extends StatefulWidget {
  @override
  __HomeState createState() => __HomeState();
}

class __HomeState extends State<_Home> {

  final FlutterTts flutterTts = FlutterTts();

  @override
  Widget build(BuildContext context) {

    TextEditingController textEditingController = TextEditingController();

    _speak(String text) async{
      print(await flutterTts.getLanguages);
      await flutterTts.setLanguage('en-US');
      await flutterTts.setPitch(1);
      await flutterTts.speak(text);
    }

    return Container(
      alignment: Alignment.center,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextFormField(
              decoration: InputDecoration(
                hintText: 'Enter Something To Speak',
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10),
                  borderSide: BorderSide(
                    width: 2,
                    color: Colors.deepOrange
                  )
                )
              ),
              controller: textEditingController,
            ),
          ),
          RaisedButton(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(8),
              side: BorderSide(width: 2,color: Colors.deepOrange)
            ),
            child: Text('Press this button to say HELLO',style: TextStyle(
              fontSize: 20,
              color: Colors.white
            ),),
            onPressed: () => _speak(textEditingController.text),
            padding: EdgeInsets.all(20),
            color: Colors.deepOrange,
          ),
        ],
      )
    );
  }
}

Hope, you enjoy this article.

Happy Flutter.