So I have a app that when user open the app it first goes to splash screen then goes to login pages and after signin in user can see the home screen. But home screen is a nested navigation. It's similar to instagram. There's 4 tabs in bottom nav bar. if I navigate to different tabs and come back it should persist the state of that tab's navigation state.
MaterialApp--
@override
Widget build(BuildContext context) {
return MaterialApp.router(
...
routerConfig: appRouter,//router
);
}
appRouter--
class AppRoutes {
// auth
static const splash = '/';
static const login = '/login';
static const createAcc = '/createAcc';
static const join = '/join';
static const createDrivingShool = '/createDrivingShool';
// lessons
static const lessonHome = '/lessonHome';
}
final appRouter = GoRouter(
navigatorKey: _rootNavKey,
initialLocation: '/',
routes: [
GoRoute(
path: AppRoutes.splash,
builder: (context, state) => const Splash(),
),
GoRoute(
path: AppRoutes.login,
builder: (context, state) => const LoginView(),
),
GoRoute(
path: AppRoutes.createAcc,
builder: (context, state) => const CreateAccountView(),
),
GoRoute(
path: AppRoutes.join,
builder: (context, state) => const JoinDrivingSchoolView(),
),
GoRoute(
path: AppRoutes.createDrivingShool,
builder: (context, state) => const CreateDrivingSchoolView(),
),
StatefulShellRoute.indexedStack(
builder: (context, state, navigationShell) =>
MainNestedNavigationHome(navigationShell: navigationShell),
parentNavigatorKey: _rootNavKey,
branches: [
StatefulShellBranch(
navigatorKey: _shellNavLessonKey,
routes: [
// top route inside branch
GoRoute(
path: AppRoutes.lessonHome,
pageBuilder: (context, state) => const NoTransitionPage(
child: InstHome(),
),
routes: [
// child route
GoRoute(
path: '2',
builder: (context, state) => const InstHome(),
),
GoRoute(
path: '3',
builder: (context, state) => const InstHome(),
),
],
),
],
),
StatefulShellBranch(
navigatorKey: _shellNavStudentKey,
routes: [
// top route inside branch
GoRoute(
path: '/b',
pageBuilder: (context, state) => const NoTransitionPage(
child: InstStudentListView(),
),
),
],
),
StatefulShellBranch(
navigatorKey: _shellNavNotificationKey,
routes: [
// top route inside branch
GoRoute(
path: '/c',
pageBuilder: (context, state) => const NoTransitionPage(
child: InstNotificationsView(),
),
),
],
),
StatefulShellBranch(
navigatorKey: _shellNavSchoolKey,
routes: [
// top route inside branch
GoRoute(
path: '/c',
pageBuilder: (context, state) => const NoTransitionPage(
child: SchoolSettingsView(),
),
),
],
),
],
),
StatefulShellRoute.indexedStack(
builder: (context, state, navigationShell) =>
MainNestedNavigationHome(navigationShell: navigationShell),
parentNavigatorKey: _rootNavKey,
branches: [
StatefulShellBranch(
navigatorKey: _shellNavLessonKey,
routes: [
// top route inside branch
GoRoute(
path: AppRoutes.lessonHome,
pageBuilder: (context, state) => const NoTransitionPage(
child: InstHome(),
),
routes: [
// child route
GoRoute(
path: '2',
builder: (context, state) => const InstHome(),
),
GoRoute(
path: '3',
builder: (context, state) => const InstHome(),
),
],
),
],
),
StatefulShellBranch(
navigatorKey: _shellNavStudentKey,
routes: [
// top route inside branch
GoRoute(
path: '/b',
pageBuilder: (context, state) => const NoTransitionPage(
child: InstStudentListView(),
),
),
],
),
StatefulShellBranch(
navigatorKey: _shellNavNotificationKey,
routes: [
// top route inside branch
GoRoute(
path: '/c',
pageBuilder: (context, state) => const NoTransitionPage(
child: InstNotificationsView(),
),
),
],
),
StatefulShellBranch(
navigatorKey: _shellNavSchoolKey,
routes: [
// top route inside branch
GoRoute(
path: '/c',
pageBuilder: (context, state) => const NoTransitionPage(
child: SchoolSettingsView(),
),
),
],
),
],
),
],
);
MainNestedNavigationHome - which is the home with bottom nav bar
class MainNestedNavigationHome extends StatelessWidget {
const MainNestedNavigationHome({
Key? key,
required this.navigationShell,
}) : super(key: key ?? const ValueKey('ScaffoldWithNestedNavigation'));
final StatefulNavigationShell navigationShell;
void _goBranch(int index) {
navigationShell.goBranch(index);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: navigationShell,
bottomNavigationBar: PrimaryBottomAppBar(
onTap: _goBranch,
),
);
}
}
Since the initial screen is splash screen I can navigate from splash screen like this.
context.push('/createAcc')
How do I handle navigating user to the home screen(screen with bottom navigation bar with nested navigation)
Can this be done in go router?
I can do this using Navigator widgets and nav keys. Like using navgiator widgets for each tab and assigning 4 nav keys to each. I can use specific keys to handle navigation inside each navigator widget. I will have to use that approach if this cannot be done in go router. I couldn't find any solution for this anywhere for this with go router...
Can this be done in go router?