Flutter中CustomScrollView嵌套Navigator报错：constraints.biggest.isFinite is not true

错误原因 #

Navigator组件需要明确的有限布局约束才能正常渲染，但SliverToBoxAdapter仅能包裹具有固有高度的组件，无法为Navigator提供有效的约束，导致出现无限约束的报错。

解决方案 #

使用SliverFillRemaining替代SliverToBoxAdapter，它会自动填充CustomScrollView的剩余空间，为Navigator提供有限的布局约束；同时添加SliverAppBar实现悬浮效果。

修改后的代码 #

import 'package:flutter/material.dart';

class Example extends StatelessWidget {
  const Example({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        // 悬浮的AppBar
        SliverAppBar(
          title: const Text('悬浮标题'),
          floating: true, // 向上滚动时隐藏，向下滚动时显示
          pinned: false, // 不需要固定在顶部设为false，需要固定则设为true
          backgroundColor: Colors.white,
        ),
        // 填充剩余空间的Sliver，为Navigator提供有限约束
        SliverFillRemaining(
          child: Navigator(
            onGenerateRoute: (settings) {
              return MaterialPageRoute(builder: (BuildContext context) {
                return Scaffold(
                  backgroundColor: Colors.grey[100],
                  body: SingleChildScrollView( // 处理页面内容过长的情况
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        const Text('some Text'),
                        // 可添加更多内容测试滚动
                        ...List.generate(50, (index) => Text('Item $index')),
                      ],
                    ),
                  ),
                );
              });
            },
          ),
        ),
      ],
    );
  }
}

关键说明 #

1. SliverFillRemaining：它会占据CustomScrollView中除其他Sliver外的所有剩余空间，为子组件（Navigator）提供明确的有限约束，彻底解决无限约束的问题。
2. 悬浮AppBar：通过SliverAppBar的floating: true实现悬浮效果，满足"顶部AppBar悬浮在Navigator上方"的需求；如果需要AppBar始终固定在顶部，可将pinned设为true。
3. 页面内容适配：如果Navigator内部的页面内容可能超出屏幕，建议用SingleChildScrollView包裹，确保内容可正常滚动；若内容较少，直接使用Column并设置mainAxisSize: MainAxisSize.max即可占满空间。

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