Flutter中Go Router的ShellRoute引发渲染错误，页面空白

你遇到的constraints.biggest.isFinite断言失败，核心原因是：ShellRoute的child本质是一个内部Navigator组件，它必须在有限的布局约束下才能正常渲染，但当前你将它嵌套在SingleChildScrollView→Column的结构中——Column在垂直方向没有明确高度限制（SingleChildScrollView允许无限滚动），导致Navigator拿到了无限高度的约束，触发Overlay布局失败。而直接传入HomePageContent时，它是固定高度的Container，不会触发这个问题。

调整布局结构，确保Shell内部的Navigator被放在能提供有限高度约束的父组件中，具体修改如下：

1. 修改Body组件布局 #

移除外层全局的SingleChildScrollView，改为仅给页面内容区域添加滚动：

class _BodyState extends State<Body> {
  @override
  Widget build(BuildContext context) {
    // 移除外层SingleChildScrollView，直接返回响应式布局
    return ScreenTypeLayout.builder(
      mobile: (context) => mobileBody(),
      tablet: (context) => tabletBody(),
      desktop: (context) => desktopBody(),
    );
  }

  // 桌面端布局示例，移动端/平板端同理调整
  Widget desktopBody() {
    bodyMarginWidth = w! / 6;
    return Padding(
      padding: EdgeInsets.symmetric(
        horizontal: bodyMarginWidth!,
        vertical: 25,
      ),
      child: Column(
        children: [
          // 用Expanded让内容区域占满屏幕剩余空间，提供有限高度约束
          Expanded(
            child: SingleChildScrollView(
              child: widget.pageContent,
            ),
          ),
          horizontalLine(),
          Footer(),
        ],
      ),
    );
  }
}

2. 确保HomeScreen提供正确约束 #

Scaffold的body本身会自动占满屏幕剩余空间，无需额外修改，保持原有结构即可：

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    w = MediaQuery.of(context).size.width;
    h = MediaQuery.of(context).size.height;
    return Scaffold(
      appBar: NavBar(),
      body: Body(
        pageContent: widget.pageContent,
      ),
    );
  }
}

3. 优化HomePageContent尺寸计算（可选） #

避免依赖全局变量，在组件内部通过MediaQuery获取尺寸：

class _HomePageContentState extends State<HomePageContent> {
  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    final screenHeight = MediaQuery.of(context).size.height;
    final bodyMarginWidth = screenWidth / 6;
    
    return Container(
      width: screenWidth - 2 * bodyMarginWidth,
      color: Colors.lime[100],
      height: screenHeight * 2,
    );
  }
}

• 移除全局SingleChildScrollView后，Column会受到Scaffold body的有限高度约束
• Expanded将内容区域的高度限制为屏幕剩余空间（减去Footer和内边距），给内部的Navigator提供明确的有限高度
• 仅给页面内容添加SingleChildScrollView，既保证长内容可以滚动，又不破坏Navigator的布局约束

内容的提问来源于stack exchange，提问作者MG-LSJ