Flutter go_router：如何将 ShellRoute 与扩展的孩子一起使用？答案

【问题标题】：Flutter go_router: how to use ShellRoute with an expanded child?Flutter go_router：如何将 ShellRoute 与扩展的孩子一起使用？
【发布时间】：2022-12-21 02:14:37
【问题描述】：

给定以下 go_router 配置：

GoRouter(
      initialLocation: "/one",
      routes: [
        ShellRoute(
          builder: (_, __, child) => Scaffold(body: Column(children: [const Text("Header"), child],)),
          routes: [
            GoRoute(
              path: '/one',
              builder: (_, __) => const Expanded(child: Text("one")),
            ),
          ],
        ),
      ],
    )

由于以下错误，框架将无法呈现树：Assertion failed: ... hasSize。如果我理解正确的话，那是因为ShellRoute 将它的孩子包装成一个Navigator，这将对嵌套内容施加最大限制。

我如何构建一个嵌套导航，其中我在 Column 中有一些固定元素作为 shell 的一部分，子路由应该垂直填充剩余的可用空间？

【问题讨论】：

标签： flutter flutter-go-router

【解决方案1】：

做这个：

...
ShellRoute(
  builder: (_, __, child) => ScaffoldWithNavBar(child: child),
  routes: [
    ...
  ],
),
...

带导航栏的脚手架

class ScaffoldWithNavBar extends StatelessWidget {
  final Widget child;

  const ScaffoldWithNavBar({super.key, required this.child});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(child: child),
      bottomNavigationBar: _buildBottomNavigationBar(),
    );
  }
  
  Widget _buildBottomNavigationBar() {
    ... 
  }
}

见ShellRoute class

【讨论】：