Flutter页面跳转后弹窗异常求助：确认按钮失效及空值检查运算符错误

问题根源 #

你遇到的两个核心问题：

1. 弹窗未正确触发显示：你仅创建了Dialog对象，但没有调用showDialog()方法来启动弹窗的渲染逻辑，这导致弹窗根本没有被正确展示在界面上。
2. Context失效引发空指针：调用Navigator.pushAndRemoveUntil(..., (route) => false)后，当前页面已被彻底从导航栈中移除，你用来创建弹窗的context属于已销毁的旧页面，不再关联任何活跃的导航器。当点击"Okey"调用Navigator.of(context).pop()时，找不到有效的导航器实例，就会抛出Null check operator used on a null value错误。

解决方法：将弹窗逻辑移至目标页面 #

最合理的做法是在BottomBarD页面加载完成后显示弹窗，这样使用的是目标页面的有效context，完全避免旧context失效的问题。

步骤1：简化按钮的导航逻辑

先修改按钮的onTap，只负责完成导航操作：

InkWell( 
  onTap: () async { 
    Navigator.pushAndRemoveUntil( 
      context, 
      MaterialPageRoute( 
        builder: (context) => BottomBarD()), 
      (route) => false); 
  }, 
  child: Container( 
    decoration: BoxDecoration( 
      gradient: LinearGradient( 
        colors: [Colors.orangeAccent, Colors.red], 
        begin: Alignment.bottomRight, 
        end: Alignment.centerLeft), 
      borderRadius: BorderRadius.circular(112.0), // 简化圆角写法
    ), 
    height: MediaQuery.of(context).size.height * 0.065, 
    width: MediaQuery.of(context).size.width * 0.80, 
    margin: const EdgeInsets.only(top: 30.0, bottom: 10.0), 
    child: const Center( // 替换多余的Row嵌套，简化布局
      child: Text( 
        "Navigate and ShowDialog Button", 
        textAlign: TextAlign.center, 
        style: TextStyle( 
          color: Colors.white, 
          fontSize: 17, 
          fontFamily: "Quando"), 
      ), 
    ), 
  ), 
)

步骤2：在BottomBarD页面中添加弹窗逻辑

修改BottomBarD的代码，在页面初始化完成后触发弹窗：

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

  @override
  State<BottomBarD> createState() => _BottomBarDState();
}

class _BottomBarDState extends State<BottomBarD> {
  @override
  void initState() {
    super.initState();
    // 等待页面构建完成后再显示弹窗，确保context处于有效状态
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _showNavigationSuccessDialog();
    });
  }

  void _showNavigationSuccessDialog() {
    showDialog(
      context: context,
      builder: (context) => Dialog( 
        child: Container( 
          padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 20),
          child: Column( 
            mainAxisSize: MainAxisSize.min, // 让弹窗高度自适应内容，避免过度拉伸
            children: [ 
              Text( 
                "Navigated to Another Page", 
                style: TextStyle( 
                  fontFamily: "Quando", 
                  fontWeight: FontWeight.w500, 
                  fontSize: 15, 
                ), 
              ), 
              const SizedBox(height: 16), // 添加间距优化视觉体验
              TextButton( 
                onPressed: () { 
                  Navigator.of(context).pop(); // 此时context为BottomBarD的有效导航上下文
                }, 
                child: Text( 
                  "Okey", 
                  style: TextStyle( 
                    fontFamily: "Quando", 
                    fontSize: 15, 
                  ), 
                ), 
              ), 
            ], 
          ), 
        ), 
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 替换为你原本的BottomBarD页面内容
      appBar: AppBar(title: const Text("BottomBarD")),
      body: const Center(child: Text("Welcome to BottomBarD")),
    );
  }
}

额外优化说明 #

• 使用WidgetsBinding.instance.addPostFrameCallback是为了规避initState中直接使用context可能触发的生命周期问题，确保页面已完成构建。
• 给弹窗容器添加内边距，并设置mainAxisSize: MainAxisSize.min，让弹窗布局更紧凑美观，不会无意义地撑满屏幕。
• 简化了按钮容器的圆角写法，用Center替代多余的Row嵌套，让代码更简洁易读。

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