如何在Flutter中获取flutter_tts的TTS状态并更新UI

flutter_tts 提供了一系列回调方法来监听TTS的不同运行状态，你可以通过这些回调更新组件状态，进而实现UI的动态变化。以下是具体实现步骤：

1. 初始化flutter_tts实例 #

在你的StatefulWidget的State类中，先定义并初始化flutter_tts实例：

import 'package:flutter_tts/flutter_tts.dart';

class TtsDemo extends StatefulWidget {
  const TtsDemo({super.key});

  @override
  State<TtsDemo> createState() => _TtsDemoState();
}

class _TtsDemoState extends State<TtsDemo> {
  late FlutterTts flutterTts;
  bool isSpeaking = false;
  String statusText = "未开始朗读";

  @override
  void initState() {
    super.initState();
    flutterTts = FlutterTts();
    _setupTtsCallbacks();
  }

2. 绑定状态回调方法 #

创建一个方法来设置TTS的各种状态回调，在回调内通过setState更新UI状态变量：

void _setupTtsCallbacks() {
  // 朗读完成时触发
  flutterTts.setCompletionHandler(() {
    setState(() {
      isSpeaking = false;
      statusText = "朗读已完成";
    });
  });

  // 朗读开始时触发
  flutterTts.setStartHandler(() {
    setState(() {
      isSpeaking = true;
      statusText = "正在朗读...";
    });
  });

  // 朗读暂停时触发
  flutterTts.setPauseHandler(() {
    setState(() {
      isSpeaking = false;
      statusText = "朗读已暂停";
    });
  });

  // 朗读继续时触发
  flutterTts.setContinueHandler(() {
    setState(() {
      isSpeaking = true;
      statusText = "继续朗读...";
    });
  });

  // 朗读出错时触发
  flutterTts.setErrorHandler((errorMsg) {
    setState(() {
      isSpeaking = false;
      statusText = "朗读出错：$errorMsg";
    });
  });
}

3. 实现朗读控制方法 #

添加朗读、暂停、继续的控制方法：

Future<void> _startSpeaking() async {
  await flutterTts.speak("这是一段用于测试的朗读文本");
}

Future<void> _pauseSpeaking() async {
  await flutterTts.pause();
}

Future<void> _resumeSpeaking() async {
  await flutterTts.resume();
}

4. 根据状态渲染UI #

在build方法中，根据状态变量动态展示UI内容：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text("TTS状态演示")),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(statusText, style: const TextStyle(fontSize: 18, height: 1.5)),
          const SizedBox(height: 30),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: isSpeaking ? null : _startSpeaking,
                child: const Text("开始朗读"),
              ),
              const SizedBox(width: 15),
              ElevatedButton(
                onPressed: isSpeaking ? _pauseSpeaking : null,
                child: const Text("暂停"),
              ),
              const SizedBox(width: 15),
              ElevatedButton(
                onPressed: !isSpeaking ? _resumeSpeaking : null,
                child: const Text("继续"),
              ),
            ],
          )
        ],
      ),
    ),
  );
}

5. 释放资源 #

在组件销毁时，记得停止TTS并释放资源：

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

这样，当TTS的状态发生变化时，对应的回调会触发setState更新状态变量，Flutter会自动重建UI，实现状态与UI的同步。

内容的提问来源于stack exchange，提问作者user21187281