Flutter GetX nested navigation not showing AppBar and Sidebar with URL updates

Question

I'm building a Flutter web application using GetX for navigation and state management. I'm having trouble with my navigation structure where I want to maintain a fixed sidebar and app bar while only updating the main content area and URL.

Current Behavior:

• When navigating to http://localhost:55836/#/dashboard/portfolio, I only see the portfolio screen
• The sidebar and app bar are not visible
• I don't know if URL updates properly with nested navigation as I can't change in the sidebar the screen

Desired Behavior:

• Fixed sidebar and app bar that don't refresh between screen changes
• Only the main content area should update
• URL should reflect the current nested route (e.g., /dashboard/portfolio, /dashboard/transactions)
• Automatic navigation based on auth state
• Keep the auth middleware functionality

Here's my relevant code:

// main.dart
class MainApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      initialRoute: '/loading',
      getPages: getPages,
      defaultTransition: Transition.noTransition,
      initialBinding: InitialBinding(),
      // ... other configuration
    );
  }
}

// home_screen.dart
class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          // Sidebar
          Obx(() => uiStateController.isSidebarVisible.value
              ? SidebarWidget()
              : SizedBox.shrink()),
          // Main content
          Expanded(
            child: Column(
              children: [
                MyAppBar(),
                Expanded(
                  child: Navigator(
                    key: Get.nestedKey(1),
                    onGenerateRoute: (settings) {
                      return GetPageRoute(
                        page: () => _resolveNestedRoute(settings.name),
                      );
                    },
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _resolveNestedRoute(String? route) {
    switch (route) {
      case '/dashboard/portfolio':
        return const PortfolioScreen();
      case '/dashboard/transactions':
        return const TransactionsScreen();
      // ... other routes
    }
  }
}

I've also implemented an auth middleware:

class AuthMiddleware extends GetMiddleware {
  @override
  RouteSettings? redirect(String? route) {
    final authController = Get.find<UserAuthController>();
    final isAuthRoute = route == '/login' || route == '/signup' || route == '/forgot-password';
    
    if (authController.user == null && !isAuthRoute) {
      return const RouteSettings(name: '/login');
    }
    if (authController.user != null && isAuthRoute) {
      return const RouteSettings(name: '/dashboard/portfolio');
    }
    return null;
  }
}

class UserAuthController extends GetxController {
  Rxn<User> firebaseUser = Rxn<User>();
  User? get user => firebaseUser.value;

  @override
  void onInit() {
    super.onInit();
    firebaseUser.bindStream(FirebaseAuth.instance.authStateChanges());
    ever(firebaseUser, handleAuthChanged);
  }

  void handleAuthChanged(User? user) {
    if (user == null) {
      // User is not logged in, navigate to login
      if (Get.currentRoute != '/login' &&
          Get.currentRoute != '/signup' &&
          Get.currentRoute != '/forgot-password') {
        Get.offAllNamed('/login');
      }
    } else {
      // User is logged in, navigate to dashboard/portfolio
      if (Get.currentRoute == '/login' ||
          Get.currentRoute == '/signup' ||
          Get.currentRoute == '/forgot-password' ||
          Get.currentRoute == '/loading') {
        // Initialize controllers
        Get.lazyPut<UserDataController>(
          () => UserDataController(),
          fenix: true,
        );
        Get.lazyPut<TransactionsController>(
          () => TransactionsController(),
          fenix: true,
        );

        // Navigate to dashboard with default portfolio screen
        Get.offAllNamed('/dashboard/portfolio');
      }
    }
  }
}

What's the best way to maintain a persistent layout (sidebar + app bar) while only updating the main content?

How can I properly update the URL to reflect nested navigation without losing the persistent layout? Is there a better approach to achieve this navigation structure with GetX?

Any help or guidance would be greatly appreciated. Thank you!