Flutter组件构建时能否跳转页面？Navigator断言异常问题及解决

我刚好碰到过一模一样的场景：想要进入页面后自动跳转到另一个页面，不需要用户触发点击，但在initState里直接调用Navigator.push时抛出了断言异常。结合你的问题和解决思路，咱们来理清楚前因后果：

问题重现 #

你的Screen0代码在初始化阶段直接调用跳转方法，代码如下：

class Screen0 extends StatefulWidget {
  @override
  _Screen0State createState() => _Screen0State();
}
class _Screen0State extends State<Screen0> {
  @override
  void initState() {
    changeScreen();
    super.initState();
  }
  void changeScreen() {
    Navigator.push(context, MaterialPageRoute(builder: (context) {
      return MyHomePage(title: 'Flutter Demo Home Page');
    }));
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold();
  }
}

运行时会触发类似这样的断言异常：

Navigator-[GlobalObjectKey _WidgetsAppState#1d8fb](dirty, state: NavigatorState#999bc(tickers: tracking 2 tickers))

报错原因 #

这是因为initState执行时，当前组件还没有完全挂载到Widget树中，此时的context还无法正确关联到NavigatorState。Navigator的所有操作都依赖已经完全初始化的上下文环境，直接在initState里调用会导致上下文无效，触发断言检查失败。

解决方法 #

你用Future包裹Navigator代码的方式非常靠谱！Future会把跳转操作推迟到下一个事件循环执行，这时组件已经完成了构建，context也能正确获取到NavigatorState了。

修正后的changeScreen方法：

void changeScreen() {
  Future(() {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => MyHomePage(title: 'Flutter Demo Home Page'))
    );
  });
}

如果需要延迟几秒再跳转，只需要给Future加上延迟即可：

void changeScreen() {
  Future.delayed(const Duration(seconds: 2), () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => MyHomePage(title: 'Flutter Demo Home Page'))
    );
  });
}

另外还有一种等价方案：使用WidgetsBinding.instance.addPostFrameCallback，它会在当前帧绘制完成后执行回调，效果完全一致：

void changeScreen() {
  WidgetsBinding.instance.addPostFrameCallback((_) {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => MyHomePage(title: 'Flutter Demo Home Page'))
    );
  });
}

总结 #

不管用哪种方式，核心思路都是让Navigator的操作延迟到组件完全构建完成之后执行，确保上下文环境有效，这样就能彻底避免断言异常的问题啦。

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