Flutter web app with Go Route and static Top Navigation Bar

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.

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

You first need to clearly defined your paths and routes hierarchy, and understand how GoRouter declarative navigation words vs imperative navigation.

Then you can create a GoRouter as the following:

// GoRouter root navigator key.
final GlobalKey<NavigatorState> _rootNavigatorKey = GlobalKey<NavigatorState>();

/// Navigation router.
final GoRouter kRouter = new GoRouter(
  navigatorKey: _rootNavigatorKey,
  initialLocation: "/",
  routes: <RouteBase>[
    // Main page
    new ShellRoute(
      pageBuilder: (_, routerState, child) {
        return new NoTransitionPage<void>(
          key: routerState.pageKey,
          child: new MainPage(body: child),
        );
      },
      routes: [
        new GoRoute(
          name: "menu-1",
          path: "/menu-1",
          pageBuilder: (_, routerState) {
            return new NoTransitionPage<void>(
              key: routerState.pageKey,
              child: const Menu1Page(),
            );
          },
        ),
        new GoRoute(
          name: "home",
          path: "/",
          pageBuilder: (_, routerState) {
            return new NoTransitionPage<void>(
              key: routerState.pageKey,
              child: const HomePage(),
            );
          },
        ),
        new GoRoute(
          name: "menu-2",
          path: "/menu-2",
          pageBuilder: (_, routerState) {
            return new NoTransitionPage<void>(
              key: routerState.pageKey,
              child: const Menu2Page(),
            );
          },
        ),
      ],
    ),
    // Authentication page.
    new GoRoute(
      parentNavigatorKey: _rootNavigatorKey,
      name: "authentication",
      path: "/authentication",
      pageBuilder: (_, routerState) {
        return new NoTransitionPage<void>(
          key: routerState.pageKey,
          child: const AuthenticationPage(),
        );
      },
    ),
    // User profile settings page.
    new GoRoute(
      parentNavigatorKey: _rootNavigatorKey,
      name: "settings",
      path: "/settings",
      builder: (_, routerState) {
        return const SettingsPage();
      },
    ),
  ],
  refreshListenable: refreshabler, // This ChangeNotifier shall implement any custom routing refresh, for example on user login.
  // Refresh router on redux routing actions.
  redirect: routerRedirect, // This function shall implement your redirection logic.
);

The implement MainPage which will be your shell-page which contains the TopNavBar.

// Navigation bar key.
const Key _kBottomNavKey = ValueKey("bottom-nav-bar");

class MainPage extends StatelessWidget {
  const MainPage({super.key, required this.body});

  final Widget body;

  @override
  Widget build(BuildContext context) {
    return new Column(
      children: [
        const TopNavBar(key: _kBottomNavKey),
        new Expanded(child: body),
      ],
    );
  }
}

Your TopNavBar implemenation shall be a StatefulWidget which keeps track (using setState and a "_current" index for example) of the currently displayed shelled page. Take a look at NavigationBar in the flutter documentation.