auto_route_library
auto_route_library copied to clipboard
Restoring nested navigation
I have an issue with restoring nested navigation state, if nested route has children. In my test app there is nested navigation with 3 tabs.
@AutoRouterConfig(replaceInRouteName: 'Screen|Page,Route') class AppRouter extends RootStackRouter { @override List<AutoRoute> get routes => [ AutoRoute( page: SignUpRoute.page, initial: true, ), AutoRoute( page: BottomNavigationRoute.page, children: [ AutoRoute( initial: true, path: homeTabPath, page: HomeTabRoute.page, children: [ AutoRoute(page: HomeRoute.page, initial: true), AutoRoute(page: InternalRoute.page), ], ), AutoRoute( path: transitionsTabPath, page: TransitionsTabRoute.page, ), AutoRoute(path: settingsPath, page: SettingsRoute.page), ], ), ]; }
Nested navigation is implemented with AutoTabsRouter, like in package description https://pub.dev/packages/auto_route#nested-navigation
`@RoutePage() class BottomNavigationPage extends StatelessWidget { const BottomNavigationPage({ super.key, });
@override Widget build(BuildContext context) { return AutoTabsRouter( // list of your tab routes // routes used here must be declared as children // routes of /dashboard routes: const [ HomeTabRoute(), TransitionsTabRoute(), SettingsRoute(), ], transitionBuilder: (context, child, animation) => FadeTransition( opacity: animation, child: child, ), builder: (context, child) { final tabsRouter = AutoTabsRouter.of(context); return Scaffold( appBar: AppBar( title: const Text('Bottom Navigator Page'), ), body: child, bottomNavigationBar: BottomNavigationBar( type: BottomNavigationBarType.fixed, currentIndex: tabsRouter.activeIndex, onTap: (index) { tabsRouter.setActiveIndex(index); }, items: const [ BottomNavigationBarItem( icon: Icon(Icons.home), label: 'home', ), BottomNavigationBarItem( icon: Icon(Icons.move_up), label: 'transitions', ), BottomNavigationBarItem( icon: Icon(Icons.settings), label: 'settings', ), ], ), ); }, ); } }`
Steps to reproduce the issue.
- Set "Don't keep activities" flag on Android device.
- Open the app.
- Call context.router.replace(const BottomNavigationRoute());
- Call context.router.push(const InternalRoute());
- Switch to the second tab.
- Put the app to background.
- Restore the app.
Expected result. The app is restore on the second tab. When I navigate to the first tab, InternalRoute page is shown. Actual result. The app is restore on the second tab. When I navigate to the first tab, HomeRoute page is shown.