Getx Subnavigators Colors

main.dart

/// roipeker - 2020

/// Based on 
/// https://medium.com/coding-with-flutter/flutter-case-study-multiple-navigators-with-bottomnavigationbar-90eb6caa6dbf

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

class SampleMultiNavColors extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Get.lazyPut(() => _RootController(), fenix: true);
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      home: _Root(),
    );
  }
}

/// screen model
class ScreenModel {
  final String name;
  final int navKey;
  final MaterialColor colors;
  static const _shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
  get shades => _shades;
  ScreenModel({this.name, this.colors, this.navKey});
  Color getColorByShade(shade) => colors[shade];
}

/// screens models list
final screensData = <ScreenModel>[
  ScreenModel(name: 'red', colors: Colors.red, navKey: 1),
  ScreenModel(name: 'green', colors: Colors.green, navKey: 2),
  ScreenModel(name: 'blue', colors: Colors.blue, navKey: 3),
];

/// main controller
class _RootController extends GetxController {
  final navMenuIndex = 0.obs;

  ScreenModel get currentScreenModel => screensData[navMenuIndex()];
  Color get navMenuItemColor => currentScreenModel.colors;

  // store the pages stack.
  List<Widget> _pages;

  // get navigators.
  List<Widget> get menuPages =>
      _pages ??= screensData.map((e) => _TabNav(e)).toList();

  // widget stuffs.
  List<BottomNavigationBarItem> get navMenuItems => screensData
      .map((e) =>
          BottomNavigationBarItem(icon: Icon(Icons.widgets), label: e.name))
      .toList();

  void openDetails(int shade) {
    final model = currentScreenModel;
    Get.to(
      PageColorDetails(
        title: model.name,
        color: model.colors,
        shade: shade,
      ),
      transition: Transition.fade,
      id: model.navKey,
    );
  }
}

/// entry page (persistent)
class _Root extends GetView<_RootController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Obx(
        () => IndexedStack(
          children: controller.menuPages,
          index: controller.navMenuIndex(),
        ),
      ),
      bottomNavigationBar: Obx(
        () => BottomNavigationBar(
          currentIndex: controller.navMenuIndex(),
          items: controller.navMenuItems,
          onTap: controller.navMenuIndex,
          selectedItemColor: controller.navMenuItemColor,
        ),
      ),
    );
  }
}

/// sub navigators.
class _TabNav extends GetView<_RootController> {
  final ScreenModel model;
  _TabNav(this.model);
  @override
  Widget build(BuildContext context) {
    return Navigator(
      key: Get.nestedKey(model.navKey),
      onGenerateRoute: (settings) =>
          MaterialPageRoute(builder: (_) => PageColorList(model: model)),
    );
  }
}

/// home of each subnavigator
class PageColorList extends StatelessWidget {
  final ScreenModel model;
  const PageColorList({Key key, this.model}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(model.name), backgroundColor: model.colors),
      body: ListView.builder(
        itemBuilder: (_, idx) {
          final shade = model.shades[idx];
          return Container(
            color: model.colors[shade],
            child: ListTile(
              title: Text(
                'shade [$shade]',
                style: Get.textTheme.bodyText2.copyWith(
                    color: Colors.white, backgroundColor: Colors.black26),
              ),
              trailing: Icon(Icons.chevron_right),
              onTap: () => Get.find<_RootController>().openDetails(shade),
            ),
          );
        },
        itemCount: model.shades.length,
      ),
    );
  }
}

/// details of colors.
class PageColorDetails extends StatelessWidget {
  final String title;
  final int shade;
  final MaterialColor color;

  const PageColorDetails({Key key, this.title, this.shade, this.color})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
        backgroundColor: color,
      ),
      backgroundColor: color[shade],
      body: Center(
        child: Text(
          '$title [$shade]',
          style: Get.textTheme.headline3.copyWith(
            color: Colors.white,
            backgroundColor: Colors.black45,
          ),
        ),
      ),
    );
  }
}

thanks for the snippet, it is helpful!

spend a bit of time to figure out how to use WillPopScope (did not test run it with this code though, just illustrate), so just share it in case someone need it.

class _Root extends GetView<_RootController> {
  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        // we need to know the exact nav key of the nested nav 
        int id = controller.getCurrentNavKey;
        Get.back(id: );
        return false;
      },
      child: Scaffold(
      ...

class _RootController extends GetxController {
  final navMenuIndex = 0.obs;

  ScreenModel get currentScreenModel => screensData[navMenuIndex()];
  Color get navMenuItemColor => currentScreenModel.colors;

  int getCurrentNavKey => currentScreenModel.navKey;

Hi @kenng , thanks for sharing the above.

Do you have a starter code with Getx GetMaterial routing & persistent tabs using WillPopScope? (I'm a newbie to Flutter)

Thanks a lot
Temi

Brilliant! Thank you all.

Thanks

Thanks a lot!!

@roipeker @kenng thank you so much guys.