Flutter中如何确保对话框仅在调用showDialog的屏幕显示？

方案1：Timer管理+页面可见性监听 #

在A页面的State类中，保存延迟任务的Timer实例，同时监听页面可见状态，仅当页面处于活跃可见状态时才弹出对话框：

class ScreenA extends StatefulWidget {
  const ScreenA({super.key});

  @override
  State<ScreenA> createState() => _ScreenAState();
}

class _ScreenAState extends State<ScreenA> with WidgetsBindingObserver {
  Timer? _dialogTimer;
  bool _isPageVisible = true;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
    // 启动10秒延迟任务
    _dialogTimer = Timer(const Duration(seconds: 10), _showDialogIfVisible);
  }

  void _showDialogIfVisible() {
    if (_isPageVisible && mounted) {
      showDialog(
        context: context,
        builder: (ctx) => const AlertDialog(
          title: Text("提示"),
          content: Text("仅在A页面显示的对话框"),
        ),
      );
    }
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    // 跳转到B页面时，A页面会进入inactive/paused状态
    _isPageVisible = state == AppLifecycleState.resumed;
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    _dialogTimer?.cancel(); // 页面销毁时取消延迟任务，避免内存泄漏
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("页面A")),
      body: Center(
        child: ElevatedButton(
          onPressed: () => Navigator.of(context).pushNamed('/screenB'),
          child: const Text("跳转到页面B"),
        ),
      ),
    );
  }
}

方案2：判断当前页面是否为导航栈顶 #

在显示对话框前，检查A页面是否处于导航栈的顶部，仅当页面未被覆盖时才弹出：

void _showDialogAfterDelay() {
  Future.delayed(const Duration(seconds: 10), () {
    // 验证当前页面是否在栈顶，且页面状态未销毁
    if (ModalRoute.of(context)?.isCurrent == true && mounted) {
      showDialog(
        context: context,
        builder: (ctx) => const AlertDialog(
          title: Text("提示"),
          content: Text("仅在A页面显示的对话框"),
        ),
      );
    }
  });
}

核心逻辑说明 #

• 方案1通过监听应用生命周期，精准判断页面的可见状态，同时在页面销毁时清理延迟任务，避免无效执行和内存泄漏。
• 方案2直接通过导航栈状态判断，确保只有A页面处于栈顶（未跳转到其他页面）时才触发对话框。

内容的提问来源于stack exchange，提问作者Hung Nguyen