nested_navigators 1.0.7

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(),
                );

[1.0.0] - 2019-04-22

  • initial release

[1.0.7] - 2019-05-05

  • drawers support added

example/README.md

nested_navigators_example #

Demonstrates how to use the nested_navigators plugin.

See full example here

Getting Started #

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  nested_navigators: ^1.0.7

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:nested_navigators/nested_navigators.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
55
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
78
Learn more about scoring.

We analyzed this package on Aug 22, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.4.0
  • pana: 0.12.19
  • Flutter: 1.7.8+hotfix.4

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health suggestions

Format lib/nested_navigators.dart.

Run flutter format to format lib/nested_navigators.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.6 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test