Blog スタッフブログ

Flutter システム開発 ひとくちコードスニペット

[Flutter]Flutterでテキストを読み上げるコードスニペット

こんにちは、株式会社MIXシステム開発担当のBloomです。

今回はFlutterで利用できるコードスニペットを紹介します。まずはこちらのパッケージを導入しましょう。

flutter pub add flutter_tts

次にiOS環境へ権限の記載を行いましょう。

<plist version="1.0">
<dict>
  <key>NSSpeechRecognitionUsageDescription</key>
  <string>音声合成を使用する理由を書きます</string>
</dict>
</plist>

これで音声読み上げ機能を利用する準備ができました。このまま画面を実装しましょう。

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

class VoicePage extends StatefulWidget {
  @override
  _VoicePageState createState() => _VoicePageState();
}

class _VoicePageState extends State<VoicePage> {
  final FlutterTts _flutterTts = FlutterTts();

  Future<void> _speak(String text) async {
    await _flutterTts.setLanguage('ja-JP');
    await _flutterTts.setPitch(1.0);       // 声の高さ（0.5〜2.0）
    await _flutterTts.setSpeechRate(0.5);  // 話す速さ（0.0〜1.0）
    await _flutterTts.speak(text);
  }

  @override
  void dispose() {
    _flutterTts.stop();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('読み上げ機能')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton.icon(
              icon: Icon(Icons.mic),
              label: Text('テスト発話'),
              onPressed: () => _speak("テスト発話"),
            ),
          ],
        ),
      ),
    );
  }
}

dispose時にしっかり停止処理を行うことを忘れないようにしましょう。

これだけで発話機能の実装ができました。良かったですね。

戻る 一覧へ戻る