Flutter中AlertDialog显示数秒无操作自动关闭后弹出第二个弹窗的实现方法

实现方案 #

核心逻辑很简单：showDialog返回的Future会在弹窗被关闭时触发完成状态，我们只需要在弹出第一个弹窗后启动定时器，计时结束后关闭第一个弹窗，待弹窗关闭完成后调用第二个弹窗的显示方法即可。

完整修改代码

首先确保你已导入Timer依赖：

import 'dart:async';

修改_showFirstDialog方法如下：

_showFirstDialog() async {
  // 启动定时任务：3秒后关闭第一个弹窗，时长可自行调整
  Timer(const Duration(seconds: 3), () {
    // 增加mounted判断避免页面销毁后执行报错
    if (mounted) {
      Navigator.pop(context);
    }
  });

  // 等待第一个弹窗关闭
  await showDialog<String>(
    context: context,
    barrierDismissible: false,
    builder: (BuildContext context) {
      return AlertDialog(
        title: const Text('Show Dialog 1'),
        content: const Text('Wait a sec'),
      );
    }
  );

  // 第一个弹窗关闭后，弹出第二个弹窗
  if (mounted) {
    _showSecondDialog();
  }
}

注意事项

• 你可以自行修改Duration(seconds: 3)的数值，调整第一个弹窗的显示时长
• mounted判断是为了避免页面已经退出销毁时，定时器回调仍然执行导致的异常，建议保留
• 原有_timerToShowFirstDialog、_showSecondDialog方法不需要做任何修改，正常调用_timerToShowFirstDialog即可触发完整弹窗流程

内容的提问来源于stack exchange，提问作者Muhammad Rizky Nur Fajrie