Flutter go_router: how to use ShellRoute with an expanded child?

Question

Given the following go_router config:

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")),
            ),
          ],
        ),
      ],
    )

the framework won't be able to render the tree due to the following error: Assertion failed: ... hasSize. If I understand correctly that is because ShellRoute wraps its child into a Navigator which will impose max constraints on the nested content.

How can I build a nested navigation as above where I have some fixed elements in a Column as part of the shell, and the child route should fill up the remaining available space vertically?

score -2 · Answer 1 · answered Dec 20 '22 at 17:07

Do this:

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

ScaffoldWithNavBar

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() {
    ... 
  }
}

See ShellRoute class

Flutter go_router: how to use ShellRoute with an expanded child?

1 Answers1