Implementing different navigators for web and mobile screens in Flutter using go_router_build

Question

I'm developing an application using Flutter to cater to both web and mobile platforms. Currently, I'm leveraging go_router_build as my routing system to ensure type safety in the app. However, I've encountered a requirement where certain screens need distinct navigation behavior based on the platform.Specifically, on the web, I aim to have these screens behave as shell routes. Meanwhile, on mobile devices, I prefer utilizing a different navigator to handle the navigation flow.Could someone advise on how to implement dynamic navigation handling in Flutter using go_router_build?

The idea behind this behavior is to keep the AppBar constant and animate the content, while on mobile, I want the app to navigate, displaying a different AppBar and hiding the bottom navigation bar.

Answer 1

use conditional logic to switch between different routing setups.

We could create two different routers: one for the web with shell routes and one for mobile with a different navigation setup.

void main() {
      final isWeb = kIsWeb;
      runApp(MyApp(isWeb: isWeb));
      final router = isWeb ? webRouter : mobileRouter;
      setupRoutes(router);
}