[Flutter] TTS - Text To Speech - 이번 블로그 포스트에서는 Flutter에서 TTS(Text To Speech) 기능를 사용하는 방법에 대해서 알아보겠습니다.

개요

이번 블로그 포스트에서는 Flutter에서 글자를 소리내어 읽어주는 기능인 TTS(Text To Speech)를 사용하는 방법에 대해서 알아봅시다. 이 블로그에서는 Flutter에서 TTS 기능을 구현하기 위해, flutter_tts 패키지를 사용할 예정입니다.

flutter_tts

이 블로그에서 소개하는 소스코드는 GitHub에서 확인하실 수 있습니다.

GitHub: https://github.com/dev-yakuza/study-flutter/tree/main/packages/tts_example

그럼 Flutter에서 TTS 기능을 사용하기 위해 flutter_tts 패키지를 사용하는 방법에 대해서 알아봅시다.

Flutter 프로젝트 생성

다음 명령어를 사용하여 flutter_tts 패키지를 사용할 Flutter 프로젝트를 생성합니다.

flutter create tts_example

Null safety를 적용하기 위해 다음 명령어를 실행합니다.

cd tts_example
dart migrate --apply-changes

flutter_tts 패키지 설치

Flutter에서 TTS 기능을 사용하기 위해, 다음 명령어를 실행하여 flutter_tts 패키지를 설치합니다.

flutter pub add flutter_tts

안드로이드 설정

flutter_tts는 안드로이드 SDK 21 이상에서만 사용 가능합니다. 이를 위해 android/app/build.gradle 파일을 열고 다음과 같이 수정합니다.

minSdkVersion 21

사용법

이제 flutter_tts 패키지를 사용하여 Flutter에서 TTS 기능을 사용해 봅시다. main.dart 파일을 열고 다음과 같이 수정합니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  final FlutterTts tts = FlutterTts();
  final TextEditingController controller =
      TextEditingController(text: 'Hello world');

  Home() {
    tts.setLanguage('en');
    tts.setSpeechRate(0.4);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          TextField(
            controller: controller,
          ),
          ElevatedButton(
              onPressed: () {
                tts.speak(controller.text);
              },
              child: Text('Speak'))
        ],
      ),
    );
  }
}

소스 코드를 자세히 살펴 봅시다.

import 'package:flutter_tts/flutter_tts.dart';

flutter_tts 패키지를 사용하기 위해 패키지를 import 하였습니다.

class Home extends StatelessWidget {
  final FlutterTts tts = FlutterTts();
  final TextEditingController controller =
      TextEditingController(text: 'Hello world');
  ...
}

Flutter에서 TTS 기능을 사용하기 위해 FlutterTts 인스턴스를 생성하였고, 사용자가 입력한 내용을 읽게 하기 위해 TextEditingController 인스턴스를 생성하여 사용자의 입력을 받을 준비를 하였습니다.

class Home extends StatelessWidget {
  ...
  Home() {
    tts.setLanguage('en');
    tts.setSpeechRate(0.4);
  }
  ...
}

Home 위젯이 생성될 때, FlutterTts에서 제공하는 기능을 사용하여 언어를 초기화하였고, 읽기 속도를 조절하였습니다.

class Home extends StatelessWidget {
  ...
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          TextField(
            controller: controller,
          ),
          ElevatedButton(
              onPressed: () {
                tts.speak(controller.text);
              },
              child: Text('Speak'))
        ],
      ),
    );
  }
  ...
}