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.
To use this plugin, add flutter_nested_navigation
as a dependency in your pubspec.yaml file.
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.