夜雨聆风
Flutter实现语音播报,3分钟让App开口说话!
订单来了！“您有一个新的订单”——语音播报是外卖、物流、医疗、社交等场景的刚需。本文带你用最少的代码，快速实现Flutter语音播报功能。
一、语音播报能做什么？
语音播报（Text-to-Speech，TTS）的应用场景非常广泛：
-
📦 物流/外卖：新订单提醒、取餐通知
-
💬 社交应用：收到新消息时朗读内容
-
📢 资讯阅读：新闻、小说的语音播放
-
🧑🦯 无障碍辅助：帮助视障用户使用应用
-
🗣️ 语音助手：与用户进行语音交互
今天我们就用Flutter最流行的TTS插件，快速实现这些功能。
二、插件选型——flutter_tts 一统江湖
Flutter中实现语音播报，首选 flutter_tts 插件 ：
|
|
|
|
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
添加依赖
dependencies:flutter_tts: ^4.0.2 # 请使用最新版
执行 flutter pub get 。
三、极简实现：5行代码让App开口
1. 基础用法
import 'package:flutter_tts/flutter_tts.dart';class VoiceService {final FlutterTts _flutterTts = FlutterTts();// 一句话播报Future<void> speak(String text) async {await _flutterTts.speak(text);}}// 使用VoiceService().speak("您有一个新的订单");
就这么简单！这5行代码已经实现了核心的语音播报功能 。
2. 完整示例：带按钮的播报页面
import 'package:flutter/material.dart';import 'package:flutter_tts/flutter_tts.dart';class VoiceDemoPage extends StatefulWidget {@override_VoiceDemoPageState createState() => _VoiceDemoPageState();}class _VoiceDemoPageState extends State<VoiceDemoPage> {final FlutterTts _flutterTts = FlutterTts();final TextEditingController _controller = TextEditingController();@overridevoid initState() {super.initState();_initTts();}// 初始化TTS配置_initTts() async {await _flutterTts.setLanguage("zh-CN"); // 设置中文await _flutterTts.setSpeechRate(0.5); // 设置语速await _flutterTts.setVolume(1.0); // 设置音量await _flutterTts.setPitch(1.0); // 设置音调}// 播报文本Future<void> _speak(String text) async {if (text.isEmpty) return;await _flutterTts.speak(text);}// 停止播报Future<void> _stop() async {await _flutterTts.stop();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('语音播报示例')),body: Padding(padding: EdgeInsets.all(16),child: Column(children: [TextField(controller: _controller,decoration: InputDecoration(labelText: '输入要播报的文字',border: OutlineInputBorder(),),),SizedBox(height: 20),Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [ElevatedButton(onPressed: () => _speak(_controller.text),child: Text('播报'),),ElevatedButton(onPressed: _stop,child: Text('停止'),),],),],),),);}@overridevoid dispose() {_flutterTts.stop();super.dispose();}}
四、进阶功能：让播报更智能
1. 设置语言和发音人
// 支持的语言列表List<dynamic> languages = await _flutterTts.getLanguages;// 设置中文await _flutterTts.setLanguage("zh-CN");// 设置英文await _flutterTts.setLanguage("en-US");// 获取可用发音人（不同设备支持不同）List<dynamic> voices = await _flutterTts.getVoices;
2. 精细控制语速和音调
// 语速范围 0.0-1.0，默认 0.5await _flutterTts.setSpeechRate(0.5); // 正常await _flutterTts.setSpeechRate(0.3); // 慢速await _flutterTts.setSpeechRate(0.8); // 快速// 音调范围 0.5-2.0，默认 1.0await _flutterTts.setPitch(1.0); // 正常await _flutterTts.setPitch(1.5); // 偏高await _flutterTts.setPitch(0.7); // 偏低
3. 监听播报状态
_flutterTts.setStartHandler(() {print("开始播报");});_flutterTts.setCompletionHandler(() {print("播报完成");// 可以在这里播报下一条消息});_flutterTts.setErrorHandler((msg) {print("播报错误: $msg");});_flutterTts.setProgressHandler((String text, int startOffset, int endOffset, String word) {print("正在播报: $word");});
4. 队列播报（多条消息依次播放）
class VoiceQueue {final FlutterTts _flutterTts = FlutterTts();final List<String> _queue = [];bool _isSpeaking = false;VoiceQueue() {_flutterTts.setCompletionHandler(() {_isSpeaking = false;_next(); // 播完一条，播放下一条});}void add(String text) {_queue.add(text);if (!_isSpeaking) {_next();}}void _next() async {if (_queue.isEmpty) return;_isSpeaking = true;final text = _queue.removeAt(0);await _flutterTts.speak(text);}}
五、STT + TTS：构建语音对话闭环
如果你的应用需要语音交互（用户说话 → 理解意图 → 语音回复），可以将语音识别（STT）和语音播报（TTS）结合 ：
class VoiceAssistant {final FlutterTts _tts = FlutterTts();// 假设你用了某个语音识别插件// final SpeechRecognition _stt = SpeechRecognition();// 处理用户输入void onUserSpeaking(String recognizedText) async {// 1. 用户说完话，停止识别// await _stt.stop();// 2. 理解意图（调用后端API或本地逻辑）String response = await _processCommand(recognizedText);// 3. 语音回复await _tts.speak(response);// 4. 回复完成后，重新开始监听// await _stt.listen();}Future<String> _processCommand(String input) async {if (input.contains('天气')) return '今天天气晴朗，气温25度';if (input.contains('时间')) return '现在是下午3点30分';return '抱歉，我没有理解您的意思';}}
⚠️ 注意：STT 和 TTS 不能同时工作——TTS播报时麦克风会采集到播报声音，导致STT误识别。需要在播报前暂停识别，播报完成后恢复识别 。
六、平台适配与避坑指南
🤖 Android 配置
在 android/app/src/main/AndroidManifest.xml 中添加权限（部分语音引擎需要联网下载数据）：
<uses-permissionandroid:name="android.permission.INTERNET" />如果需要录音（STT场景），还需添加：
<uses-permissionandroid:name="android.permission.RECORD_AUDIO" />📱 iOS 配置
在 ios/Runner/Info.plist 中添加：
<key>NSMicrophoneUsageDescription</key><string>我们需要访问麦克风进行语音输入</string>
🚨 常见问题
❌ 播报没有声音
-
检查设备是否静音
-
确认音量是否开启
-
Android 需要确保系统 TTS 引擎已安装并启用（通常在设置 → 语言和输入法 → 文字转语音中）
❌ 中文播报无效
-
确保设置了正确的语言代码
zh-CN -
某些设备可能需要下载中文语音数据
❌ iOS 模拟器无声音
-
iOS 模拟器不支持 TTS，必须在真机上测试
❌ 播报卡顿或延迟
-
避免一次性播报过长的文本
-
可以分段播报，利用
setProgressHandler监听进度
❌ Web 平台支持
-
flutter_tts 支持 Web，但需要浏览器支持 Web Speech API
七、完整示例：语音播报工具类
import 'package:flutter_tts/flutter_tts.dart';class TtsService {static final TtsService _instance = TtsService._internal();factory TtsService() => _instance;TtsService._internal();final FlutterTts _flutterTts = FlutterTts();bool get isSpeaking => _flutterTts.isSpeaking;Future<void> init({String language = 'zh-CN',double speechRate = 0.5,double pitch = 1.0,double volume = 1.0,}) async {await _flutterTts.setLanguage(language);await _flutterTts.setSpeechRate(speechRate);await _flutterTts.setPitch(pitch);await _flutterTts.setVolume(volume);// 监听完成事件_flutterTts.setCompletionHandler(() {print('播报完成');});_flutterTts.setErrorHandler((msg) {print('播报错误: $msg');});}Future<void> speak(String text) async {if (text.isEmpty) return;await _flutterTts.speak(text);}Future<void> stop() async {await _flutterTts.stop();}Future<void> pause() async {await _flutterTts.pause();}Future<void> resume() async {await _flutterTts.speak(''); // 继续播放}Future<void> dispose() async {await _flutterTts.stop();}}// 使用await TtsService().init();await TtsService().speak('欢迎使用语音播报');
八、总结
Flutter 实现语音播报，核心就是 flutter_tts 插件：
-
添加依赖，一行命令搞定
-
初始化配置，设置语言、语速、音调
-
调用 speak，传入要播报的文本
-
进阶：状态监听、队列播报、STT+TTS联动
这个功能非常适合需要实时通知、无障碍辅助、语音交互的应用场景。
谢谢你读到最后。
若觉得尚可，恳请点赞、在看、转发分享。
山高水长，我们下期再会。
