Flutter实现点击麦克风图标弹出录音弹窗的改造方案

核心思路 #

替换原有的页面跳转逻辑，改用Flutter内置的弹窗组件（推荐showModalBottomSheet，符合录音操作的交互习惯）承载录音、播放状态页面，同时调整布局适配弹窗尺寸，保留原有录音功能逻辑。

步骤1：修改麦克风图标点击事件 #

将原有的Navigator.push页面跳转替换为弹窗调用：

IconButton(
  icon: Icon(Icons.mic),
  onPressed: () {
    // 调用底部弹窗展示录音界面
    showModalBottomSheet(
      context: context,
      isScrollControlled: true, // 允许弹窗高度自适应内容
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
      ),
      builder: (context) => RecorderModal(),
    );
  },
)

步骤2：重构录音页面为弹窗布局 #

移除原Recorder12Screen的全屏Scaffold，改为适配弹窗的容器结构，保留原有的录音/播放状态切换逻辑：

class RecorderModal extends StatefulWidget {
  @override
  _RecorderModalState createState() => _RecorderModalState();
}

class _RecorderModalState extends State<RecorderModal> {
  bool _isRecording = true; // 控制录音/播放状态切换

  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height * 0.6, // 设置弹窗高度为屏幕60%
      padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
      color: Colors.white,
      child: Column(
        children: [
          // 弹窗头部：标题+关闭按钮
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                _isRecording ? "正在录音" : "录音回放",
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600),
              ),
              IconButton(
                icon: Icon(Icons.close),
                onPressed: () {
                  // 关闭弹窗前确保停止录音
                  if (_isRecording) {
                    // 调用原有的停止录音方法
                    // stopRecording();
                  }
                  Navigator.pop(context);
                },
              ),
            ],
          ),
          Divider(height: 1),
          // 承载原录音/播放页面内容
          Expanded(
            child: _isRecording ? RecordingPage() : PlaybackPage(),
          ),
        ],
      ),
    );
  }
}

步骤3：适配子页面布局 #

调整原RecordingPage和PlaybackPage的布局，移除全屏依赖（比如去掉原Scaffold、调整Expanded的使用），确保内容在弹窗尺寸内正常显示。例如原页面中的全屏按钮、布局间距，可适当缩小或调整为适配弹窗的样式。

关键注意事项 #

• 弹窗关闭时需主动停止录音，避免后台持续占用录音资源；
• 若需更灵活的弹窗尺寸，可使用DraggableScrollableSheet替代showModalBottomSheet，支持用户拖拽调整高度；
• 保持原有录音功能的核心逻辑不变，仅修改展示容器和入口逻辑。

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