nested_navigators 1.0.8

Flutter widget for implementing multiple nested navigators with their own route stacks.

NestedNavigators

Flutter widget for implementing multiple nested navigators with their own route stacks.

Usage

To use, you must at least specify two arguments items and generateRoute:

class RootPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _RootPageState();
}

class _RootPageState extends State<RootPage> {
  @override
  Widget build(BuildContext context) {
    return NestedNavigators(
      items: {
        NestedNavItemKey.blue: NestedNavigatorItem(
          initialRoute: Routes.blue,
          icon: Icons.access_time,
          text: "Blue",
        ),
        NestedNavItemKey.red: NestedNavigatorItem(
          initialRoute: Routes.red,
          icon: Icons.send,
          text: "Red",
        ),
        NestedNavItemKey.green: NestedNavigatorItem(
          initialRoute: Routes.green,
          icon: Icons.perm_identity,
          text: "Green",
        ),
      },
      generateRoute: Routes.generateRoute,
    );
  }
}

See Routes.generateRoute()

By default NestedNavigators displays BottomNavigationBar, but you can hide it if you want:

clearStackAfterTapOnCurrentTab: false

You can customize BottomNavigatosBar items in two ways:

• configure BottomNavigationBarItem:

buildBottomNavigationItem: (key, item, selected) => BottomNavigationBarItem(
           icon: Icon(
             item.icon,
             color: Colors.blue,
           ),
           title: Text(
             item.text,
             style: TextStyle(fontSize: 20),
           ),
         )

• Define your own widget:

buildCustomBottomNavigationItem: (key, item, selected) => Container(
            height: 60,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Icon(
                  item.icon,
                  size: 24,
                  color: selected ? Colors.blue : null,
                ),
                Text(
                  item.text,
                  style: TextStyle(fontSize: 20, color: selected ? Colors.blue : null),
                ),
              ],
            ),
          )

Initial selected navigator:

• If number of navigators is even number, than it will be the first elemnt of items;
• If number of navigators is odd number, than it will be the middle element of items;
• You can specify your navigator key:

 initialNavigatorKey: NestedNavItemKey.green

You can specify the color of ripple effect in your app theme or in bottomNavigationBarTheme:

bottomNavigationBarTheme: Theme.of(context).copyWith(
       splashColor: Colors.blue[100],
   )

By default, if a user clicks on an already selected tab item, the route stack will be cleared and the initial route will be displayed. You can disable this option:

clearStackAfterTapOnCurrentTab: false

When you navigate to another route within nested navigator, you can hide BottomNavigatorsBar for specific route, just add hideNavTabBar: true to route arguments:

Navigator.of(context).pushNamed(
                    Routes.red,
                    arguments: {
                      hideNavTabBar: true,
                    },
                  );

You can select another navigator from your routes:

NestedNavigatorsBlocProvider.of(context).select(NestedNavItemKey.green)

You can also switch displayed navigator and at the same time make navigation in the new navigator:

NestedNavigatorsBlocProvider.of(context).selectAndNavigate(
                      NestedNavItemKey.green,
                      (navigator) => navigator.pushNamed(
                            Routes.green,
                            arguments: {
                              ArgumentKeys.value: 100,
                            },
                          ));

Add NestedNavigatorsBlocProvider to app widget if you want to use the root navigator and need access to nested navigators from there:

class App extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _AppState();
}

class _AppState extends State<App> {
  final NestedNavigatorsBloc _bloc = NestedNavigatorsBloc<NestedNavItemKey>();

  @override
  Widget build(BuildContext context) {
    return NestedNavigatorsBlocProvider(
      bloc: _bloc,
      child: MaterialApp(
        title: 'Flutter Demo',
        home: RootPage(),
        onGenerateRoute: (routeSettings) => Routes.generateRoute(routeSettings),
      ),
    );
  }
}

You can use Drawer instead of BottomNavigationBar, use drawer or endDrawer for this:

drawer: (items, selectedItemKey, selectNavigator) => Drawer(
            child: ListView(
              children: items.entries
                  .map((entry) => ListTile(
                        title: Text(
                          entry.value.text,
                          style: TextStyle(
                            color: entry.key == selectedItemKey
                                ? Colors.blue
                                : null,
                          ),
                        ),
                        trailing: Icon(
                          entry.value.icon,
                          color:
                              entry.key == selectedItemKey ? Colors.blue : null,
                        ),
                        onTap: () => selectNavigator(entry.key),
                      ))
                  .toList(),
            ),
          ),

Also you can open drawers from your pages:

NestedNavigatorsBlocProvider.of(context).actionWithScaffold(
                  (scaffoldState) => scaffoldState.openDrawer(),
                );