英文:
How to display a "stop" icon when recording is started in Flutter?
问题
我正在开发一个Flutter应用程序，其中用户可以录制音频。当录制开始时，我希望显示一个“停止”图标，但在实现这一功能时遇到了一些困难。
我有一个FloatingActionButton，触发录制功能，我想根据录制状态动态更改图标。isRecording变量会正确更新，我已经验证录制系统本身正常工作（生成的音频文件有效）。
这是我的代码的简化版本：
// ... (代码片段)
void toggleRecording() async {
if (isRecording) {
await record.stop();
} else {
if (await record.hasPermission()) {
Directory directory = await getApplicationDocumentsDirectory();
String destinationPath = '${directory.path}/Imitations/${widget.recording.name}/${phrase.pathsToImitation.length}.m4a';
Directory subDirectory1 = Directory('${directory.path}/Imitations');
if (!await subDirectory1.exists()) {
await subDirectory1.create(recursive: true);
}
Directory subDirectory2 = Directory('${directory.path}/Imitations/${widget.recording.name}');
if (!await subDirectory2.exists()) {
await subDirectory2.create(recursive: true);
}
await record.start(
path: destinationPath,
encoder: AudioEncoder.aacLc,
bitRate: 128000,
samplingRate: 44100,
);
}
}
setState(() {
isRecording = !isRecording;
print(isRecording);
});
}
Widget build(BuildContext context) {
return Scaffold(
// ... (代码片段)
floatingActionButton: FloatingActionButton(
onPressed: toggleRecording,
child: isRecording ? const Icon(Icons.stop) : const Icon(Icons.mic),
),
);
}
// ... (代码片段)
我希望FloatingActionButton在录制开始时显示“停止”图标（isRecording = true），在录制停止时显示麦克风图标（isRecording = false）。
isRecording变量和recording都会正确更新，我已通过检查生成的音频文件进行验证。然而，图标不会根据isRecording变量动态更改。
我会感激任何关于如何实现这一功能的指导或建议。提前感谢您！
英文:
I'm working on a Flutter app and I have a feature where users can record audio. I want to display a "stop" icon when the recording is started, but I'm facing some difficulties in implementing this.
I have a FloatingActionButton that triggers the recording functionality, and I want to dynamically change the icon based on the recording state. The isRecording variable is updated correctly, and I have verified that the recording system itself works properly (the generated audio file is valid).
Here's a simplified version of my code:
// ... (code snippet)
void toggleRecording() async {
if (isRecording) {
await record.stop();
} else {
if (await record.hasPermission()) {
Directory directory = await getApplicationDocumentsDirectory();
String destinationPath = '${directory.path}/Imitations/${widget.recording.name}/${phrase.pathsToImitation.length}.m4a';
Directory subDirectory1 = Directory('${directory.path}/Imitations');
if (!await subDirectory1.exists()) {
await subDirectory1.create(recursive: true);
}
Directory subDirectory2 = Directory('${directory.path}/Imitations/${widget.recording.name}');
if (!await subDirectory2.exists()) {
await subDirectory2.create(recursive: true);
}
await record.start(
path: destinationPath,
encoder: AudioEncoder.aacLc,
bitRate: 128000,
samplingRate: 44100,
);
}
}
setState(() {
isRecording = !isRecording;
print(isRecording);
});
}
Widget build(BuildContext context) {
return Scaffold(
// ... (code snippet)
floatingActionButton: FloatingActionButton(
onPressed: toggleRecording,
child: isRecording ? const Icon(Icons.stop) : const Icon(Icons.mic),
),
);
}
// ... (code snippet)
I want the FloatingActionButton to display a "stop" icon (Icons.stop) when the recording is started (isRecording = true), and a microphone icon (Icons.mic) when the recording is stopped (isRecording = false).
The isRecording variable and recording is correctly updated, and I have verified this by checking the generated audio file. However, the icon doesn't change dynamically based on the isRecording variable.
I would appreciate any guidance or suggestions on how to achieve this functionality. Thank you in advance!
答案1
得分: 1
但请注意，有状态的构建器有它们自己的setState，因此如果您想要更新位于有状态构建器中的 UI，您必须使用它的setState而不是实际类的setState。两者是不同的。
英文:
Yes but note that stateful builder have there own setstate so if you want to update ui which resides in stateful builder you have to use it's setstate not the actually class setstate .both are different
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论