Flutter web app with Go Route and static Top Navigation Bar

Issue

I have written a web app in Flutter for backend users which have a side navigation bar and return different containers according to menu selections. Now I have to move to a front end web app that requires page routing (url with page names or even parameters) and with a static top menu bar.

I found package Go_Router quite useful but it only contains an example with bottom navigation bar. I found some examples in creating static top bar but not using Go_Router package. Can anyone show me the way how to do this?

In short again, I would like to have a web app that has a static top navigation bar, url changes to subpage names in which some may need to accept parameters as well. Thanks in advance.

Solution

I think you can use shellRoute for this.
Shell pages in go_router are used for multi-part routes. They allow you to define a shared scaffold for a group of routes. check Flutter doc.

ShellRoute(
  builder: (BuildContext context, GoRouterState state, Widget child) {
    return Scaffold(
      appBar: AppBar(
        title: Text('App Shell')
      ),
      body: Center(
        child: child,
      ),
    );
  },
  routes: [
    GoRoute(
      path: 'a'
      builder: (BuildContext context, GoRouterState state) {
        return Text('Child Route "/a"');
      }
    ),
  ],
),

Answered By – Harsimran Singh

Answer Checked By – David Marino (FlutterFixes Volunteer)