How to properly Navigate to the next page using Paths.

[mmgarrido]

My use case is that the next page is stored in a String and is determined dynamically. So I need to navigate to the next page using paths.

This code works.

    context.router.navigate(
        MainRoute(
          children: [
            NotificationsRouter(
              children: [
                FcmScrollingRoute(),
              ],
            ),
          ],
        ),
    );

But this code does not work.

    // path = '/main/notifications    OR
    // path = '/main/notifications/list
    context.router.navigateNamed(path);  

Below is my Routes and Pages

@MaterialAutoRouter(
    replaceInRouteName: 'Page,Route',
    routes: <AutoRoute>[
        // application login screen
        AutoRoute(path: '/login', page: LoginPage, initial: true),
        // application main screen
        AutoRoute(
            path: '/main',
            page: MainPage,
            children: childRoutes,
        ),
    ],
 )

// application sub screens implemented as bottom nav bar items
const childRoutes = <AutoRoute>[
  AutoRoute(
    path: 'documents',
    name: 'DocumentsRouter',
    page: EmptyRouterPage,
    children: [
      AutoRoute(path: '', page: DocumentsPage),     //default page
      AutoRoute(path: 'doc', page: PdfViewerPage),
      //other pages
    ],
  ),
  AutoRoute(
    path: 'notifications',
    name: 'NotificationsRouter',
    page: EmptyRouterPage,
    children: [
      RedirectRoute(path: '', redirectTo: 'list'),
      AutoRoute(path: 'list', page: FcmScrollingPage),
      //other pages
    ],
  ),
  AutoRoute(
    path: 'settings',
    name: 'SettingsRouter',
    page: EmptyRouterPage,
    children: [
      AutoRoute(path: '', page: SettingsPage),
      //other pages
    ],
  )
];

class MainPage extends StatelessWidget {
  const MainPage({Key ? key}) : super(key: key);
  static final int NAV_HOME = 0;

  @override
  Widget build(BuildContext context) {
    return AutoTabsScaffold(
      routes: const [
        DocumentsRouter(),
        NotificationsRouter(),
        SettingsRouter(),
      ],
      bottomNavigationBuilder: (context, tabsRouter) {
        return BottomNavigationBar(
            type: BottomNavigationBarType.shifting,
            iconSize: 32,
            selectedFontSize: 16,
            onTap: (int navIndex) {
                tabsRouter.setActiveIndex(navIndex);
            // -------------------------------------------------------//
            },
            currentIndex: tabsRouter.activeIndex,
            items: const [
              BottomNavigationBarItem(
              icon: Icon(Icons.house_rounded), // Icons.library_books_outlined
              label: 'Home',
              backgroundColor: Colors.red,
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.notifications_active_outlined),
              label: 'Notifications',
              backgroundColor: Colors.red,
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              label: 'Settings',
              backgroundColor: Colors.red,
            ),
          ],
        );
      },
    );
  }
}

class FcmNotificationService {
  ...
  static Future<void> initNotification(BuildContext context) async {
    final AndroidInitializationSettings initSettingsAndroid = AndroidInitializationSettings('@mipmap/ic_launcher');

    final IOSInitializationSettings initSettingsIOS = IOSInitializationSettings( );
    final InitializationSettings initSettings = InitializationSettings(android: initSettingsAndroid, iOS: initSettingsIOS);

    await _notificationsPlugin.initialize(
      initSettings,
      onSelectNotification: (String? path) {
        if (path != null) {
          print('FcmNotificationService.initNotification(): path: ${path}');

        //--------------------------------------------//
        // The code below does not work for both:     //
        // 1. path = '/main/notifications'     AND    //
        // 2. path = '/main/notifications/list        //
        //--------------------------------------------//     

        // context.router.navigateNamed(path);     << THIS CODE DOES NOT WORK

        // this code works!
          context.router.navigate(
            // root > MainPage > NotificationsRouter > FcmScrollingRoute
            MainRoute(
              children: [
                NotificationsRouter(
                  children: [
                    FcmScrollingRoute(),
                  ],
                ),
              ],
            ),
          );
        }
      },
    );
  }

No error is thrown, but the screen does not go to the FcmScrollingPage. What is the proper way to navigate to FcmScrollingPage (or any other page) using paths? I am using auto_route v4.0.1, flutter v3.0.2

Thanks in advance. Any help would be greatly appreciated.

[Milad-Akarie]

@mmgarrido I don't see any issues in your implementation, here's a few things you can do to test if your path is correct. 1- try to manually use this '/main/notifications/list' in router.delegate(initalDeepLink: '/main/notifications/list') and rerun your App, see if it takes you there 2- try to match the path your self router.matcher.match(path) see what result you get

[mmgarrido]

@mmgarrido I don't see any issues in your implementation, here's a few things you can do to test if your path is correct. 1- try to manually use this '/main/notifications/list' in router.delegate(initalDeepLink: '/main/notifications/list') and rerun your App, see if it takes you there 2- try to match the path your self router.matcher.match(path) see what result you get

Thanks for the tip. I will try it when I revisit my code.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions