Flutter导航跳转代码无语法问题，运行时报!_debugLocked等两个错误如何解决？

根本诱因 #

你编写的导航跳转代码直接在组件build方法的执行流程中同步触发，没有等当前组件树的构建周期完全结束就操作路由栈，是两个报错的共同原因。

• 第一个!navigator._debugLocked is not true报错：Flutter的Navigator实例在页面渲染、路由栈操作的过程中会被标记为锁定状态，防止并发操作路由栈导致状态混乱。构建阶段直接调用路由跳转，会命中Navigator的锁定状态断言校验，抛出异常。
• 第二个setState() or markNeedsBuild() called during build报错：路由跳转本质会触发Overlay、新页面组件的重绘逻辑，相当于在当前组件还未完成构建流程时，就主动触发了其他组件的重绘请求，违反了Flutter先父后子的同步构建时序要求，因此抛出该异常。

两种常用的修复方案均可解决问题：

1. 延迟跳转操作到当前帧构建完成后执行
   使用WidgetsBinding.instance.addPostFrameCallback包裹跳转逻辑，该回调会在当前组件树的全部构建流程完全结束后触发，不会和当前构建时序冲突：

if (_username == _password) {
  WidgetsBinding.instance.addPostFrameCallback((_) {
    Navigator.of(ctx).pushReplacement(
      MaterialPageRoute(
        builder: (ctx1) => const HomeScreen()
      ),
    );
  });
}

2. 调整跳转逻辑的触发时机
   如果跳转是由用户交互触发（比如点击登录按钮），直接把判断+跳转逻辑放到用户交互回调（如onPressed、onTap）中即可，这类回调本身就处于当前帧构建完成的时序中，不会触发构建冲突。

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