Getx bottom navigation, subnav in home.

main.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';

void main() {
  runApp(MyApp());
}

class MyNavModel {
  static final Map<String, MyNavModel> urls = {};
  final IconData icon;
  final String name, url;
  final GetPageBuilder page;
  MyNavModel(this.name, this.icon, this.url, this.page) {
    urls[url] = this;
  }
}

final mainNavPages = [
  MyNavModel('page 1', Icons.nature, '/1', () => PageOne()),
  MyNavModel('page 2', Icons.nature, '/2', () => PageTwo()),
  MyNavModel('page 3', Icons.nature, '/3', () => PageThree()),
];

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      initialBinding: BindingsBuilder.put(() => NavService()),
      home: Home(),
    );
  }
}

class NavService extends GetxService {
  final activeIndex = 0.obs;
  final initialRoute = mainNavPages[0].url;

  @override
  void onInit() {
    ever(activeIndex, (int index) {
      var url = mainNavPages[index].url;
      Get.toNamed(url, id: 1);
    });
    super.onInit();
  }

  @override
  void onClose() {
    super.onClose();
  }

  void processRouting(Routing route) {
    final _dict = MyNavModel.urls;
    var url = route.route.settings.name;
    if(_dict.containsKey(url)){
      activeIndex(mainNavPages.indexOf(_dict[url]));
    }
  }

  GetPageRoute onGenerateRoute(settings) {
    final currentUrl = settings.name;
    final model = MyNavModel.urls[currentUrl];
    return GetPageRoute(
      routeName: currentUrl,
      settings: settings,
      page: model?.page ?? () => Center(child: Text('ERROR!!!!!!!!')),
    );
  }
}

class Home extends GetWidget<NavService> {
  const Home({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Navigator(
        key: Get.nestedKey(1),
        initialRoute: controller.initialRoute,
        observers: [GetObserver(controller.processRouting, Get.routing)],
        onGenerateRoute: controller.onGenerateRoute,
      ),
      bottomNavigationBar: Obx(
            () =>
            BottomNavigationBar(
              currentIndex: controller.activeIndex(),
              onTap: controller.activeIndex,
              items: mainNavPages
                  .map((e) =>
                  BottomNavigationBarItem(icon: Icon(e.icon), label: e.name))
                  .toList(),
            ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      alignment: Alignment.center,
      child: Text('One'),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      alignment: Alignment.center,
      child: ElevatedButton(
        onPressed: () => Get.to(() => DetailsPage()),
        child: Text('Don\'t Click me'),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Container(
        color: Colors.white,
        child: Center(
          child: Text('I told you to not click me'),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      alignment: Alignment.center,
      child: Text('Three'),
    );
  }
}