flutter_nested_navigation's Introduction

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.

flutter_nested_navigation's People

Contributors

Stargazers

Watchers

flutter_nested_navigation's Issues

Nested Navigation Fails After Multiple Nested Routes Opened

I am following the Nested stateful navigation with ShellRoute #2650 on Flutter and saw your comment. Thanks for sharing. There is a bug in the code. The following steps will replicate the bug:

When your example app loads, it shows 'Page A'. Click on 'Go to details'. Leave that page open.
Click on 'Page B' in the bottom navbar. 'Page B' will display. Click on 'Go to details'. Leave that page open.
In the bottom navbar, click 'Page A'.
At the top appbar, click on the back arrow ⬅. You should still be on 'Page A'.
Click on 'Go to details' under 'Page A' in the center again. It won't go anywhere.
Click on 'Page B' in the bottom navbar. 'Details /b/details' will display.
At the top appbar, click on the back arrow ⬅. The screen will change to 'Page B'.
Click on 'Go to details' under 'Page B' in the center again. It won't go anywhere.

Recommend Projects