I am trying to get web based routing to work in flutter with a responsive app. Essentially on a large screen, I want to show a list view and a detail view at the same time, and on a small screen to show either a list view or a detail view, and on both have the url update when an item is selected on the list view. I am using AutoRoute pacakge to do routing, and I can get both the large screen scenario or the small screen scenario to work individually, but they require different routing logic, so I cannot do both.

This router allows me to create the nested large screen layout where the list view and detail view appear on the same screen:

@MaterialAutoRouter(
  replaceInRouteName: 'Page,Route',
  routes: <AutoRoute>[
    AutoRoute(
      initial: true,
      path: "/books",
      name: "BooksRouter",
      page: BooksPage,
      children: [
        AutoRoute(path: ':bookId', page: BookDetailsPage),
        RedirectRoute(path: '*', redirectTo: ''),
      ],
    ),
  ],
)
class $AppRouter {}

This allows me to do a nested layout where they appear on different screens:

@MaterialAutoRouter(
  replaceInRouteName: 'Page,Route',
  routes: <AutoRoute>[
    AutoRoute(
      initial: true,
      path: "/books",
      name: "BooksRouter",
      page: EmptyRouterPage,
      children: [
        AutoRoute(path: '', page: BooksPage),
        AutoRoute(path: ':bookId', page: BookDetailsPage),
        RedirectRoute(path: '*', redirectTo: ''),
      ],
    ),
  ],
)
class $AppRouter {}

Is there away to do this so I can do both?