Flutter: Nested navigation inside a page using go_router - flutter

Question

In my Flutter app, I use go_router to navigate between pages.
Here are the current pages in my app:
accounts_page
add_account_page
import_accounts_page
Now, I would like to implement nested navigation inside add_account_page, so I can add a new account using multiple steps, let's say:
account_info_step
account_type_step
account_detail_step
Here is what I tried:
final _navigatorKey = GlobalKey<NavigatorState>();
final _addAccountNavigatorKey = GlobalKey<NavigatorState>();
late final router = GoRouter(
navigatorKey: _navigatorKey,
initialLocation: "/accounts_page",
routes: [
ShellRoute(
navigatorKey: _addAccountNavigatorKey,
builder: (context, state, child) => AddAccountPage(child: child),
routes: [
GoRoute(
parentNavigatorKey: _addAccountNavigatorKey,
name: "account_info_step",
path: "/account_info_step",
builder: (context, state) => const AccountInfoStep(),
),
GoRoute(
parentNavigatorKey: _addAccountNavigatorKey,
name: "account_type_step",
path: "/account_type_step",
builder: (context, state) => const AccountTypeStep(),
),
GoRoute(
parentNavigatorKey: _addAccountNavigatorKey,
name: "account_detail_step",
path: "/account_detail_step",
builder: (context, state) => const AccountDetailStep(),
),
],
),
GoRoute(
name: "accounts_page",
path: "/accounts_page",
pageBuilder: (context, state) => const AccountsPage(),
),
GoRoute(
name: "import_accounts_page",
path: "/import_accounts_page",
pageBuilder: (context, state) => const ImportAccountsPage(),
),
],
);
And then I call context.pushNamed("account_info_step"), but nothing happens.
Is it possible then to use go_router to implement nested navigation inside add_account_page and if yes, how?
Thanks.

Answer 1

If your intention is to get to AccountInfoStep() full path leading to this builder should be added in your case:
context.push("/accounts_page/account_info_step")
I assume you are missing name for your top routes to represent proper nesting to use the context.pushNamed()

Answer 2

I think the way you are trying to create nested navigation is not right. Also you don't need to use ShellRoute, you can use shell route if you want to create something like a persistent bottom navigation bar and changing only the child while keeping the bottom nav bar at the bottom.
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:untitled/homepage.dart';
import 'package:untitled/test_page.dart';
final _navigatorKey = GlobalKey<NavigatorState>();
// final _addAccountNavigatorKey = GlobalKey<NavigatorState>();
class MyRouter{
static final router = GoRouter(
navigatorKey: _navigatorKey,
initialLocation: "/accounts_page",
routes: [
GoRoute(
name: "accounts_page",
path: "/accounts_page",
builder: (context, state) => const MyHomePage(),
routes: <RouteBase>[
GoRoute(
name: "account_info_step",
path: "account_info_step",
builder: (context, state) => const TestPage(),
),
GoRoute(
name: "account_type_step",
path: "account_type_step",
builder: (context, state) => const TestPage(),
),
GoRoute(
name: "account_detail_step",
path: "account_detail_step",
builder: (context, state) => const TestPage(),
),
]
),
],
);
}
I think this is what you are looking for. Also, note that you don't need to add a '/' in path for nested screens.
And to navigate to those nested screens, you can do something
like this:-
context.go('/accounts_page/account_info_step');