Question 76364 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter: Nested navigation inside a page using go_router

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.

Tags:

2

Answers


  1. 0

    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()

    Login or Signup to reply.
  2. 0

    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(),  
),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search