Nested Navigation using Getx Flutter

Question

I want to implement Nested navigation using GetNavigator, but can't find any proper guide. Anyone with a proper solution ?

Answer 1

This is one of the first search results on Google, but there were no answers that would satisfy what I needed so here is what I did. This solution applies to the current version of GetX at the time of this writing, 4.6.5:

1. Create a new file called destination.dart that will be responsible for the routing of your nested Navigator:

destination.dart

import 'package:flutter/foundation.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_common/screens/_screens.dart';
import 'package:get/get.dart';

enum Destination {
  // Update these values in the enum with new values that represent the 
  // screens that you want to navigate in your app.
  home,
  countries,
  auth;

  String get route {
    return '/${describeEnum(this)}';
  }

  Widget get widget {
    // Update the cases in this switch for each element of this enum 
    // and the screens that you want to navigate when an enum is selected.
    switch (this) {
      case Destination.home:
        return const HomeScreen();
      case Destination.countries:
        return const CountriesScreen();
      case Destination.auth:
        return const AuthScreen();
    }
  }

  static GetPageRoute getPage(RouteSettings settings) {
    var destination = Destination.values.firstWhereOrNull((e) => e.route == settings.name);
    return GetPageRoute(page: () => destination?.widget ?? Container());
  }
}

Now it's time to implement the nested navigation:

2. You don't need to use GetNavigator to use nested navigators with GetX. You can use simply Navigator that comes from package:flutter/material.dart.

3. Place the Navigator widget under the GetMaterialApp (from GetX) tree widget, like in the example below. See the comments in the code for detailed explanation:

app.dart

import 'package:flutter/material.dart';
import 'package:flutter_common/util/destination.dart';
import 'package:get/get.dart';

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    // GetX Material App. The Navigator must be under this widget tree
    return GetMaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const _Scaffold(),
    );
  }
}

class _Scaffold extends StatelessWidget {
  const _Scaffold({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter Common')),
      // Nested navigator
      body: Navigator(
        // You MUST pass an unique key to the Navigator
        key: Get.nestedKey(1),
        // Initial route (see destination.dart above)
        initialRoute: Destination.home.route,
        // Generate a route based on Destination (see destination.dart above)
        onGenerateRoute: (settings) => Destination.getPage(settings),
      ),
      bottomNavigationBar: Container(
        color: Colors.amber,
        height: 72,
      ),
    );
  }
}

• 3.1. You must pass an unique nested key to the nested Navigator. This can be done with Get.nestedKey(<some integer>).

• 3.2. In initialRoute you reference one of the values from Destination enum, using the .route in the end.

• 3.3. In onGenerateRoute you just need to put (settings) => Destination.getPage(settings).

4. In order to navigate to a new screen in the nested navigator you just need to call Get.toNamed(Destination.auth.route, id: 1), for example. This will transition to the AuthScreen().

The first parameter is the route destination, and the second parameter id is the unique key that you defined for your nested navigator on step 3.1 above.