Nested Routes in Flutter

Question

I am trying to create nested routing in Flutter v3.

I have implemented the idea in here: https://docs.flutter.dev/cookbook/effects/nested-nav

My design goes like this:

I have three different layouts. AuthLayout SystemLayout AfterAuthLayout

In AuthLayout, as the name suggests, I am displaying login,register and password forget screens as:

Route _onGenerateRoute(RouteSettings settings) {
    late Widget page;
    switch (settings.name) {
      case loginPage:
        page = LoginScreen();
        break;
      case registerPage:
        page = RegisterScreen();
        break;
    }

    return MaterialPageRoute<dynamic>(
        builder: (context) {
          return page;
        },
        settings: settings);
  }

The same logic goes in another layout as this.

Route _onGenerateRoute(RouteSettings settings) {
    print(settings.name);
    late Widget page;
    switch (settings.name) {
      case systemSelect:
        page = SystemSelectScreen();
        break;
    }

    return MaterialPageRoute<dynamic>(
      builder: (context) {
        return page;
      },
      settings: settings,
    );
  }

And I have something like a global navigator handler like this:

static Route<dynamic> generateRoute(RouteSettings settings) {
    const routeHome = "/";
    const routeAuthPrefix = "/auth/";
    const routeAfterAuthPrefix = "/dash/";
    const routeSystemPrefix = "/system/";

    late Widget page;

    if (settings.name == routeHome) {
      page = HomePage();
    } else if (settings.name!.startsWith(routeAuthPrefix)) {
      final subPath = settings.name!.substring(routeAuthPrefix.length);
      page = AuthLayout(subPath);
    } else if (settings.name!.startsWith(routeSystemPrefix)) {
      final subPath = settings.name!.substring(routeSystemPrefix.length);
      page = SystemLayout(subPath);
    } else if (settings.name!.startsWith(routeAfterAuthPrefix)) {
      final subPath = settings.name!.substring(routeAfterAuthPrefix.length);
      page = AfterAuthLayout(subPath);
    } else {
      page = const NotFoundScreen();
    }

    return MaterialPageRoute(builder: (context) {
      return page;
    });
  }

The problem is, once I am in AuthLayout class, I cannot change my layout to e.g. SystemLayout class.

Some informations about this subject are seem outdated. So I couldn't figure out how to pop one layout and push another one.

This is my home screen

This is my login screen.

When I use Navigator.of(context).pop() here or Navigator.of(context).pushNamed("/system/select), the router searches the suggested page inside AuthLayout, the prefix /system/ is not enough to load SystemLayout.

But when I use backbutton on the navbar, the app really pops the page and returns to my home page. I was expecting to do it with Navigotor.of(context).pop)The home page is not a part of any of my layout. It is my root page.

Once I am in AuthLayout, I cannot change my layout with code. But I can change the layout with back button on the appbar.

I hope the question is clear.

Thanks in advance.