The state of the main body is lost when navigating to the details page

[Hannnes1]

Hi, I like your example, but I found one issue. It can be observed if you scroll down in one of the lists, and then click on an item. The details page then opens, but scroll position in the list is lost.

One possible solution I had in mind was to reuse the same page, something like this:

StatefulShellBranch(
initialLocation: '/nav1/null',
navigatorKey: _nav1NavigatorKey,
routes: [
GoRoute(
  name: AppRouter.nav1Details,
  path: '/nav1/:id',
  pageBuilder: (context, state) => NoTransitionPage(
    child: AppScaffold(
      body: NavListScreen(
        key: state.pageKey,
        listId: 1,
      ),
      secondaryBody: state.pathParameters["id"] == 'null'
          ? null
          : DetailsScreen(
              id: state.pathParameters["id"],
            ),
    ),
  ),
),

That does retain the state of the list correctly, but it also means that there is no way to navigate back from the details page. I also tried to figure something out with keys, but couldn't get that to work either.

[hanskokx]

Yeah, I agree it's not ideal. I too noticed the same issue but could not find a good workaround. I'm not sure the Flutter team has spent a lot of resources on figuring this out, which is why I opened the documentation request ticket that you found. Hopefully there's a reasonable solution to be had in the future.

[Hannnes1]

I hope so too. I'm going to spend some more time to try to figure something out. Hopefully I can come up with something

[LukasMirbt]

Hi! Did you consider the following approach? Since ShellRoute builds AppScaffold and NavListScreen as a shell around secondaryBody, the state is maintained when navigating.

// Nav1 branch
StatefulShellBranch(
  initialLocation: AppRouter.nav1,
  navigatorKey: _nav1NavigatorKey,
  routes: [
    ShellRoute(
      pageBuilder: (context, state, child) => NoTransitionPage(
        child: AppScaffold(
          body: NavListScreen(
            key: state.pageKey,
            listId: 1,
          ),
          secondaryBody: child,
        ),
      ),
      routes: [
        GoRoute(
          name: AppRouter.nav1,
          path: AppRouter.nav1,
          builder: (context, state) => const SizedBox.shrink(),
          routes: [
            GoRoute(
              name: AppRouter.nav1Details,
              path: ":id",
              builder: (context, state) => DetailsScreen(
                id: state.pathParameters["id"],
              ),
            ),
          ],
        ),
      ],
    ),
  ],
);