Flutter: Future.delayed延迟结束后自动弹出AlertDialog的实现方法

核心调整逻辑 #

你现在的代码只在延迟回调里写了关闭加载弹窗的操作，只要把弹出完成确认弹窗的逻辑追加到同一个延迟回调里，就能实现“加载弹窗展示固定时长后自动关闭、紧接着弹出完成提示”的效果，几个需要注意的细节：

• 把原来设置的7秒延迟时长调整为你需求里的8秒，匹配预设的弹窗展示周期
• 执行完关闭旧弹窗的操作后，再调用showDialog方法弹出新的完成提示框，不要在关闭旧弹窗之前就弹出新弹窗，避免路由栈顺序错乱
• 处理好上下文引用，避免因为组件销毁后回调还在执行导致的报错

可直接复用的调整后代码 #

Future.delayed(const Duration(seconds: 8), () {
  // 校验当前组件是否还处于挂载状态，避免空指针/上下文报错
  if (!mounted) return;
  // 关闭当前的上传加载弹窗
  Navigator.pop(context);
  // 弹出上传完成的确认弹窗
  showDialog(
    context: context,
    barrierDismissible: false,
    builder: (dialogContext) {
      return AlertDialog(
        content: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const Icon(Icons.check_circle, color: Colors.green, size: 48),
            const SizedBox(height: 16),
            const Text('文件上传完成'),
          ],
        ),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(dialogContext),
            child: const Text('确认'),
          )
        ],
      );
    },
  );
});
// 返回原有的加载等待弹窗
return AlertDialog(
  content: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      const Center(child: CircularProgressIndicator()),
      Text('Attendi l\'invio del File')
    ],
  ),
);

额外优化提示 #

• 不要在showDialog的builder里复用原来的组件context，优先使用builder回调自带的dialogContext，避免上下文匹配错误导致的弹窗位置异常、路由跳转问题
• 如果你的实际场景是需要等待真实文件上传完成后再触发弹窗切换，不要硬编码固定延迟时长，要把延迟触发逻辑替换为上传接口的成功/失败回调，固定延迟仅适用于你当前“固定8秒展示加载弹窗”的需求
• 给Future.delayed的回调加上挂载状态校验是Flutter开发的通用安全写法，如果这段逻辑写在StatefulWidget的构建方法里，可以直接用内置的mounted属性判断，避免用户在8秒等待期间退出页面后，回调尝试操作已销毁的上下文抛出异常

内容的提问来源于stack exchange，提问作者Emanuel Developer