Flutter Nested Stateful Navigation

Nested navigation package that allows having an individual stateful navigator for each tab of BottomNavigationBar.

The plugin enables Instagram-like User Experience i.e. new screens pushed in the tab navigators do not overlay the entire app view, allowing the user to browse inner routes of multiple tabs. Every tab uses its own Navigator with the help of ShellRoute.

The package is based on StatefulShellRoute proposition by tolo.

Getting started

To use this plugin, add flutter_nested_navigation as a dependency in your pubspec.yaml file.

Usage

First, import flutter_nested_navigation and declare your tab widgets with the NestedNavigationTabRoutes mixin:

class ExampleTab extends StatelessWidget with NestedNavigationTabRoutes {

  @override
  final routes = [
    GoRoute(
      path: 'details',
      builder: (context, state) => SomeChildScreen(),
    ),
  ];

  ...
}

Next, create your router by calling createNestedRouter:

final router = createNestedRouter(tabs: [
  NestedNavigationTabItem(
    defaultLocation: '/a',
    name: 'Page A',
    icon: Icons.home,
    body: ExampleTab(name: 'Page A',
  ),
  NestedNavigationTabItem(
    defaultLocation: '/b',
    name: 'Page B',
    icon: Icons.home,
    body: ExampleTab(name: 'Page B'),
  ),
]);

And finally, use the created router e.g. by calling MaterialApp.router(routerConfig: router).

See example/example.dart for more details.