Flutter: Nested navigation inside a page using go_router

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

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');

edit: I've understood your requirement, and I think this will help. In your code only,

GoRoute(
              name: "account_type_step",
              path: "account_type_step",
              builder: (context, state) => const TestPage(),
            ),

let’s say you don’t want the bottom nav bar in this screen, there is a parameter called parentNavigatorKey. You can set it with you rootNavigator Key _navigatorKey.

GoRoute(
          parentNavigatorKey: _navigatorKey,
          name: "account_type_step",
          path: "account_type_step",
          builder: (context, state) => const TestPage(),  
),