如何将Flutter中的文本到语音以及显示的文本与Flutter_tts同步

Question

当它显示在屏幕上时，我需要一些文本给用户阅读。每次阅读完文本后，都需要显示并阅读下一个文本，直到没有更多文本可用为止。我通过摆弄FlutterTts.setCompletionHandler和setState来完成这项工作，但我可能发现了最麻烦的方法

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(
home: WaitingRoom(),
);
}
}
class WaitingRoom extends StatefulWidget {
@override
_WaitingRoomState createState() => _WaitingRoomState();
}
class _WaitingRoomState extends State<WaitingRoom> {
FlutterTts flutterTts = FlutterTts();
String speechBubbleText = 'Bonjour. Joue avec moi !';
List<Widget> actions = [];
bool alreadyDelayed = false;
@override
Widget build(BuildContext context) {
if (!alreadyDelayed) {
flutterTts.setCompletionHandler(() {
youWon();
});
alreadyDelayed = true;
}
flutterTts.speak(speechBubbleText);
return Scaffold(
appBar: AppBar(),
body: Column(
children: [
Container(
child: Text(
speechBubbleText,
),
),
Row(
children: actions,
),
],
));
}
void youWon() {
setState(() {
speechBubbleText = 'Bravo, tu as gagné !'
'Le médecin devrait arriver bientôt';
actions = [];
});
flutterTts.setCompletionHandler(() {
setState(() {
speechBubbleText = 'Ca va se passer comme ça :';
});
flutterTts.setCompletionHandler(() {
setState(() {
speechBubbleText = 'Tu vas attendre le médecin';
actions = [];
actions.add(Text('test'));
});
flutterTts.setCompletionHandler(() {
setState(() {
speechBubbleText = 'Il viendra te chercher pour la consultation';
actions = [];
actions.add(Text('test'));
});
flutterTts.setCompletionHandler(() {
setState(() {
speechBubbleText =
'Quand ce sera fini, tu pourras rentrer à la maison !';
actions = [];
actions.add(Text('test'));
});
flutterTts.setCompletionHandler(() {
setState(() {
speechBubbleText = 'Maintenant, on attend le médecin';
actions = [];
actions.add(Text('test'));
});
flutterTts.setCompletionHandler(() {});
});
});
});
});
});
}
}

pubspec.yaml:flutter_tts: ^2.0.0中的floft_tts版本

正如您所看到的，youWon((看起来就像一个回调地狱。我可以提取函数，但我觉得我做错了。flaft_tts的文档提到了命令await flutterTts.awaitSpeakCompletion(true);，但在等待读取文本时，屏幕仍然显示所有文本而不等待。

我在这里错过了什么？

提前感谢您的帮助。

Answer 1

这应该适用于您：

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(
home: WaitingRoom(),
);
}
}
class WaitingRoom extends StatefulWidget {
@override
_WaitingRoomState createState() => _WaitingRoomState();
}
class _WaitingRoomState extends State<WaitingRoom> {
late FlutterTts flutterTts;
String speechBubbleText = 'Bonjour. Joue avec moi !';
List<Widget> actions = [];
bool alreadyDelayed = false;
@override
initState() {
super.initState();
initTts();
}
initTts() async {
flutterTts = FlutterTts();
await flutterTts.awaitSpeakCompletion(true);
await youWon();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Column(
children: [
Container(
child: Text(
speechBubbleText,
),
),
Row(
children: actions,
),
],
));
}
Future<void> youWon() async {
await flutterTts.speak(speechBubbleText);
setState(() {
speechBubbleText = 'Bravo, tu as gagné !'
'Le médecin devrait arriver bientôt';
actions = [];
});
await flutterTts.speak(speechBubbleText);
setState(() {
speechBubbleText = 'Ca va se passer comme ça :';
});
await flutterTts.speak(speechBubbleText);
setState(() {
speechBubbleText = 'Tu vas attendre le médecin';
actions = [];
actions.add(Text('test'));
});
await flutterTts.speak(speechBubbleText);
setState(() {
speechBubbleText = 'Il viendra te chercher pour la consultation';
actions = [];
actions.add(Text('test'));
});
await flutterTts.speak(speechBubbleText);
setState(() {
speechBubbleText = 'Quand ce sera fini, tu pourras rentrer à la maison !';
actions = [];
actions.add(Text('test'));
});
await flutterTts.speak(speechBubbleText);
setState(() {
speechBubbleText = 'Maintenant, on attend le médecin';
actions = [];
actions.add(Text('test'));
});
await flutterTts.speak(speechBubbleText);
}
}

Answer 2

我终于找到了一个只需要复制flatterTts.speak(speechBubbleText(代码行的解决方案。与回调地狱相比，这是一个巨大的收获！

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(
home: WaitingRoom(),
);
}
}
class WaitingRoom extends StatefulWidget {
@override
_WaitingRoomState createState() => _WaitingRoomState();
}
class _WaitingRoomState extends State<WaitingRoom> {
FlutterTts flutterTts = FlutterTts();
String speechBubbleText = 'Bonjour. Joue avec moi !';
List<Widget> actions = [];
bool alreadyDelayed = false;
@override
Widget build(BuildContext context) {
if (!alreadyDelayed) {
flutterTts.speak(speechBubbleText);
flutterTts.setCompletionHandler(() {
youWon();
});
alreadyDelayed = true;
}
return Scaffold(
appBar: AppBar(),
body: Column(
children: [
Container(
child: Text(
speechBubbleText,
),
),
Row(
children: actions,
),
],
));
}
Future<void> youWon() async {
flutterTts.setCompletionHandler(() {});
setState(() {
speechBubbleText = 'Bravo, tu as gagné !'
'Le médecin devrait arriver bientôt';
actions = [];
});
await flutterTts.speak(speechBubbleText);
setState(() {
speechBubbleText = 'Ca va se passer comme ça :';
});
await flutterTts.speak(speechBubbleText);
setState(() {
speechBubbleText = 'Tu vas attendre le médecin';
actions = [];
actions.add(Text('test'));
});
await flutterTts.speak(speechBubbleText);
setState(() {
speechBubbleText = 'Il viendra te chercher pour la consultation';
actions = [];
actions.add(Text('test'));
});
await flutterTts.speak(speechBubbleText);
setState(() {
speechBubbleText =
'Quand ce sera fini, tu pourras rentrer à la maison !';
actions = [];
actions.add(Text('test'));
});
await flutterTts.speak(speechBubbleText);
setState(() {
speechBubbleText = 'Maintenant, on attend le médecin';
actions = [];
actions.add(Text('test'));
});
await flutterTts.speak(speechBubbleText);
}
}

有趣的是，await flutterTts.awaitSpeakCompletion(true);是无用的，因为它默认设置为true。将其设置为false将忽略所有文本，直到最后一个文本为止。

我仍在使用setCompletionHandler((，它不是为之创建的，所以这是一个部分答案，但至少它摆脱了回调地狱。如果我找到更好的方法，我会更新，请随时发表评论或给出更好的答案。