【Flutter】音声をテキスト化する方法｜サンプルを用いて解説

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  avatar_glow: ^2.0.2 //アニメーションに使用します
  speech_to_text: ^6.1.1 //音声をテキスト化するパッケージ（こっちがメイン）

dev_dependencies:
  flutter_test:
    sdk: flutter

<true/>//trueの閉じタグの下に記述します
//ここから
	<key>NSSpeechRecognitionUsageDescription</key>
	<string>アプリの音声認識に利用します。</string>
	<key>NSMicrophoneUsageDescription</key>
	<string>アプリの音声認識に利用します。</string>
//ここまで
</dict>
</plist>

//package="com.example.stt"の部分は作成したプロジェクトのままで構いません 
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.stt">
//ここから
  <uses-permission android:name="android.permission.RECORD_AUDIO"/>
  <uses-permission android:name="android.permission.INTERNET"/>
  <uses-permission android:name="android.permission.BLUETOOTH"/>
  <uses-permission android:name="android.permission.BLUETOOTH_ADMIN"/>
  <uses-permission android:name="android.permission.BLUETOOTH_CONNECT"/>
  <queries>
    <intent>
        <action android:name="android.speech.RecognitionService" />
    </intent>
  </queries>
//ここまで
  <application>
    <!-- 省略 -->
  </application>
</manifest>

//変更点のみ抜粋（元の記述：minSdkVersion flutter.minSdkVersion）
minSdkVersion 21

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:speech_to_text_app/speech_screen.dart';

void main() {
  // ステータスバーの背景色を透明に設定
  SystemChrome.setSystemUIOverlayStyle(
      const SystemUiOverlayStyle(statusBarColor: Colors.transparent));
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: SpeechScreen(),
      debugShowCheckedModeBanner: false,
      title: 'Speech To Text',
    );
  }
}

import 'package:flutter/material.dart';

const bgColor = Color(0xff00A67E);
const textColor = Color(0xffFEFDFC);

// 必要なパッケージをインポート
import 'package:avatar_glow/avatar_glow.dart';
import 'package:flutter/material.dart';
import 'package:speech_to_text/speech_to_text.dart';
import 'package:speech_to_text_app/colors.dart';

// StatefulWidgetを継承したSpeechScreenクラス
class SpeechScreen extends StatefulWidget {
  const SpeechScreen({super.key});

  @override
  State<SpeechScreen> createState() => _SpeechScreenState();
}

// SpeechScreenクラスの状態を管理するためのクラス
class _SpeechScreenState extends State<SpeechScreen> {
  // SpeechToTextクラスのインスタンス
  SpeechToText speechToText = SpeechToText();
  // 初期のテキスト
  var text = "Hold the button and start speaking";
  // 音声認識中かどうかのフラグ
  var isListening = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // フローティングアクションボタンの位置を指定
      floatingActionButtonLocation:
          FloatingActionButtonLocation.miniCenterFloat,
      // AvatarGlowを利用して、ボタンにグロー効果を追加
      floatingActionButton: AvatarGlow(
        endRadius: 75.0,
        animate: isListening, // isListeningがtrueの場合、アニメーションする
        duration: const Duration(milliseconds: 2000),
        glowColor: bgColor,
        repeatPauseDuration: const Duration(milliseconds: 100),
        showTwoGlows: true,
        child: GestureDetector(
          // タップを押し始めたときの処理
          onTapDown: (details) async {
            if (!isListening) {
              var available = await speechToText.initialize();
              if (available) {
                setState(() {
                  isListening = true;
                  speechToText.listen(onResult: (result) {
                    setState(() {
                      text = result.recognizedWords;
                    });
                  });
                });
              }
            }
          },
          // タップを離したときの処理
          onTapUp: (details) {
            setState(() {
              isListening = false;
            });
            speechToText.stop();
          },
          child: CircleAvatar(
            backgroundColor: bgColor,
            radius: 35,
            child: Icon(
              isListening ? Icons.mic : Icons.mic_none,
              color: Colors.white,
            ),
          ),
        ),
      ),
      // アプリバーの設定
      appBar: AppBar(
        backgroundColor: bgColor,
        leading: const Icon(Icons.sort_rounded, color: Colors.white),
        title: const Text(
          'Speech to Text',
          style: TextStyle(fontWeight: FontWeight.w600, color: textColor),
        ),
      ),
      // 本文の設定
      body: Container(
        alignment: Alignment.center,
        padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
        margin: const EdgeInsets.only(bottom: 150),
        child: Text(
          text,
          style: const TextStyle(
              fontSize: 20, color: Colors.black54, fontWeight: FontWeight.w600),
        ),
      ),
    );
  }
}