GetX Navigation Issue: Unexpected null value in nested navigation

Question

GetX Navigation Issue: Unexpected null value in nested navigation

Problem

I'm experiencing an issue with GetX nested navigation in my Flutter application. When trying to navigate to child routes within my HomeScreen, I'm getting an "Unexpected null value" error.

The error occurs specifically in the HomeScreen where I'm using GetRouterOutlet for nested navigation:

══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
The following TypeErrorImpl was thrown building
GetRouterOutlet-[LabeledGlobalKey<NavigatorState>#505e1 Getx nested key: 1]:
Unexpected null value.

The relevant error-causing widget was:
  GetRouterOutlet-[LabeledGlobalKey<NavigatorState>#505e1 Getx nested key: 1]

Code Structure

Main App Setup (main.dart):

return GetMaterialApp(
  debugShowCheckedModeBanner: false,
  initialRoute: Routes.LOGIN,
  getPages: Routes.routes,
  defaultTransition: Transition.noTransition,
  transitionDuration: Duration.zero,
  initialBinding: InitialBinding(),
  // ... other configurations
);

Routes Configuration:

static final routes = [
  // Auth routes (outer navigation)
  GetPage(name: LOGIN, page: () => const LoginScreen()),
  // ... other auth routes

  // Main app structure (nested navigation)
  GetPage(
    name: HOME,
    page: () => const HomeScreen(),
    participatesInRootNavigator: true,
    children: [
      GetPage(
        name: PORTFOLIO,
        title: '/portfolio',
        page: () => const PortfolioScreen(),
      ),
      // ... other child routes
    ],
  ),
];

HomeScreen Implementation:

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          // Sidebar
          Expanded(
            child: Column(
              children: [
                const MyAppBar(),
                Expanded(
                  child: Container(
                    child: GetRouterOutlet(
                      anchorRoute: Routes.HOME,
                      initialRoute: Routes.PORTFOLIO,
                      key: Get.nestedKey(1),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Navigation Flow

1. App starts at /login
2. After successful authentication, it navigates to /home
3. Inside /home, it should show the portfolio screen (/portfolio) by default
4. User can navigate between child routes using the sidebar

Debug Output

[GETX] GOING TO ROUTE /home
[GETX] REMOVING ROUTE /login
[GETX] GetDelegate is created !
[GETX] Instance "UserDataController" has been created
[GETX] Instance "UserDataController" has been initialized

What I've Tried

1. Verified that all routes are properly defined in the Routes class
2. Confirmed that initialRoute is set correctly in both GetMaterialApp and GetRouterOutlet
3. Checked that the nested key (1) is consistent across the application
4. Made sure all controllers are properly initialized through InitialBinding

Questions

1. What could be causing the "Unexpected null value" error in the GetRouterOutlet?
2. Is there something wrong with my nested navigation setup?

Environment

• Flutter: latest stable
• get: ^4.6.5
• firebase_auth: latest
• Platform: Web

Any help would be greatly appreciated!

Thanks again!!