Unable to access ` tabsRouter` from Tab's child to navigate to desired index

[muhammadmateen027]

I would like to access tabRouter from child's child to navigate to the desired route of the tab or index. I have tried with router.parent<TabsRouter>() and it didn't helped me so far:

Routes are defined like this:

@AutoRouterConfig()
class AppRouter extends _$AppRouter {
  @override
  List<AutoRoute> get routes {
    return [
      AutoRoute(
        page: DashboardRoute.page,
        initial: true,
        path: '/',
        children: [
          AutoRoute(page: HomeRoute.page),
          AutoRoute(page: DiscoverRoute.page),
          AutoRoute(page: SettingsRoute.page),
        ],
      ),
    ];
  }
}

Here is the code for DashboardPage file:

@RoutePage()
class DashboardPage extends StatelessWidget {
  const DashboardPage({super.key});

  @override
  Widget build(BuildContext context) {
    return AutoTabsScaffold(
      routes: const [
        HomeRoute(),
        DiscoverRoute(),
        SettingsRoute(),
      ],
      transitionBuilder: (context, child, animation) {
        return FadeTransition(opacity: animation, child: child);
      },
      bottomNavigationBuilder: (_, tabsRouter) {
        return BottomNavyBar(
          showElevation: false,
          backgroundColor: context.colorScheme.background,
          selectedIndex: tabsRouter.activeIndex,
          onItemSelected: tabsRouter.setActiveIndex,
          items: <BottomNavyBarItem>[
            BottomNavyBarItem(
              title: Text(context.locale.homeTab),
              icon: const Icon(Icons.home),
              textAlign: TextAlign.center,
              activeColor: context.colorScheme.primary,
            ),
            BottomNavyBarItem(
              title: Text(context.locale.discoverTab),
              icon: const Icon(Icons.search),
              textAlign: TextAlign.center,
              activeColor: context.colorScheme.primary,
            ),
            BottomNavyBarItem(
              title: Text(context.locale.settingsTab),
              icon: const Icon(Icons.settings),
              textAlign: TextAlign.center,
              activeColor: context.colorScheme.primary,
            ),
          ],
        );
      },
    );
  }
}

Here is HomePage file code:

@RoutePage()
class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: context.colorScheme.background,
      appBar: AppBar(
        backgroundColor: context.colorScheme.background,
        actions: const [UserProfileImage()],
        title: const UserLocation(),
      ),
      body:  ScrollableColumn(
        padding: const EdgeInsets.symmetric(
          horizontal: SizeConstant.p16,
          vertical: SizeConstant.p4,
        ),
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Header(),
          const SizedBox(height: 8),
          const Recommendations(),
          ElevatedButton(
            onPressed: () {
                 /// TODO: How I can control tabs from here to switch to desire index/route
            },
            child: const Text('Jump to Discover tab'),
          ),
        ],
      ),
    );
  }
}

[bharathraj-e]

I have same issue. How did u solve this?