Flutter页面加载前显示加载指示器异常：无法正常控制显示状态

你的问题出在上下文(context)作用域和导航操作时序上：

1. 调用showDialog弹出加载框后立刻执行Navigator.push跳转新页面，原页面上下文被新页面覆盖，后续的Navigator.of(context).pop()实际是操作新页面的导航栈，根本找不到之前的加载框，导致加载框要么无限显示，要么因导航干扰渲染完全不出现。
2. 如果FormIncident页面初始化逻辑阻塞UI线程（比如debug下的10秒加载），会连加载框的渲染都被卡住，出现加载框不显示的情况。

修复代码示例 #

onPressed: () async {
  // 弹出加载框，禁止点击空白关闭
  showDialog(
    context: context,
    barrierDismissible: false,
    builder: (context) {
      return const Center(
        child: CircularProgressIndicator(color: Colors.white),
      );
    },
  );

  try {
    // 等待页面跳转完成
    await Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => FormIncident()),
    );
  } finally {
    // 使用rootNavigator确保找到最上层的dialog并关闭
    Navigator.of(context, rootNavigator: true).pop();
  }
}

额外优化建议 #

• 如果FormIncident的加载耗时来自初始化逻辑（比如数据请求、复杂计算），把这些操作放到后台线程（用compute函数或Isolate），避免阻塞UI线程导致加载框无法正常渲染。
• 给加载框添加背景遮罩提升体验：

  builder: (context) {
    return Container(
      color: Colors.black54,
      child: const Center(
        child: CircularProgressIndicator(color: Colors.white),
      ),
    );
  }
  

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