Persistant Navigation Bar: how can i navigate to navigation tabs from another tabs?

Question

I used persistent_bottom_nav_bar package for my nav bar, and I want to navigate to the tab of the navigation bar from another screen automatically. Here is my bottom nav bar class:

class MyBottomNavBar extends StatelessWidget {
  PersistentTabController controller = PersistentTabController(initialIndex: 0);
  MyBottomNavBar({super.key, required this.controller});
  @override
  Widget build(BuildContext context) {
    return PersistentTabView(
      context,
      controller: controller,
      screens: _buildScreens(),
      items: _navBarsItems(),
      confineInSafeArea: true,
      backgroundColor: Colors.white, // Default is Colors.white.
      handleAndroidBackButtonPress: true, // Default is true.
      resizeToAvoidBottomInset:
          true, // This needs to be true if you want to move up the screen when keyboard appears. Default is true.
      stateManagement: true, // Default is true.
      hideNavigationBarWhenKeyboardShows:
          true, // Recommended to set 'resizeToAvoidBottomInset' as true while using this argument. Default is true.
      decoration: NavBarDecoration(
        borderRadius: BorderRadius.circular(10.0),
        colorBehindNavBar: Colors.white,
      ),
      popAllScreensOnTapOfSelectedTab: true,
      popActionScreens: PopActionScreensType.all,
      itemAnimationProperties: const ItemAnimationProperties(
        // Navigation Bar's items animation properties.
        duration: Duration(milliseconds: 200),
        curve: Curves.ease,
      ),
      screenTransitionAnimation: const ScreenTransitionAnimation(
        // Screen transition animation on change of selected tab.
        animateTabTransition: true,
        curve: Curves.ease,
        duration: Duration(milliseconds: 200),
      ),
      navBarStyle:
          NavBarStyle.style10, // Choose the nav bar style with this property.
    );
  }

  List<Widget> _buildScreens() {
    return [
      const ZekrCounterScreen(),
      const ZekrListScreen(),
      const AddZekrScreen(),
      const Center(child: Text('آمار')),
      const Center(child: Text('تنظیمات')),
    ];
  }

  List<PersistentBottomNavBarItem> _navBarsItems() {
    return [
      PersistentBottomNavBarItem(
        icon: const Icon(CupertinoIcons.cube),
        title: ("ذکر شمار"),
        activeColorPrimary: CupertinoColors.activeBlue,
        inactiveColorPrimary: CupertinoColors.systemGrey,
        activeColorSecondary: Colors.white,
      ),
      PersistentBottomNavBarItem(
        icon: const Icon(CupertinoIcons.list_bullet),
        title: ("لیست اذکار"),
        activeColorPrimary: CupertinoColors.activeGreen,
        inactiveColorPrimary: CupertinoColors.systemGrey,
        activeColorSecondary: Colors.white,
        routeAndNavigatorSettings: RouteAndNavigatorSettings(
          initialRoute: "/",
          routes: {
            "/list": (final context) => const ZekrListScreen(),
            "/add": (final context) => const AddZekrScreen(),
            "/chart": (final context) => const Center(child: Text('آمار')),
            "/settings": (final context) =>
                const Center(child: Text('تنظیمات')),
          },
        ),
      ),
      PersistentBottomNavBarItem(
        icon: const Icon(CupertinoIcons.add),
        title: ("افزودن ذکر"),
        activeColorPrimary: Colors.blue.shade300,
        inactiveColorPrimary: CupertinoColors.systemGrey,
        activeColorSecondary: Colors.white,
        routeAndNavigatorSettings: RouteAndNavigatorSettings(
          initialRoute: "/",
          routes: {
            "/list": (final context) => const ZekrListScreen(),
            "/add": (final context) => const AddZekrScreen(),
            "/chart": (final context) => const Center(child: Text('آمار')),
            "/settings": (final context) =>
                const Center(child: Text('تنظیمات')),
          },
        ),
      ),
      PersistentBottomNavBarItem(
        icon: const Icon(CupertinoIcons.chart_pie),
        title: ("آمار"),
        activeColorPrimary: Colors.deepOrange,
        inactiveColorPrimary: CupertinoColors.systemGrey,
        activeColorSecondary: Colors.white,
        routeAndNavigatorSettings: RouteAndNavigatorSettings(
          initialRoute: "/",
          routes: {
            "/list": (final context) => const ZekrListScreen(),
            "/add": (final context) => const AddZekrScreen(),
            "/chart": (final context) => const Center(child: Text('آمار')),
            "/settings": (final context) =>
                const Center(child: Text('تنظیمات')),
          },
        ),
      ),
      PersistentBottomNavBarItem(
        icon: const Icon(CupertinoIcons.settings),
        title: ("تنظیمات"),
        activeColorPrimary: Colors.deepPurple,
        inactiveColorPrimary: CupertinoColors.systemGrey,
        activeColorSecondary: Colors.white,
        routeAndNavigatorSettings: RouteAndNavigatorSettings(
          initialRoute: "/",
          routes: {
            "/list": (final context) => const ZekrListScreen(),
            "/add": (final context) => const AddZekrScreen(),
            "/chart": (final context) => const Center(child: Text('آمار')),
            "/settings": (final context) =>
                const Center(child: Text('تنظیمات')),
          },
        ),
      ),
    ];
  }
}

I want to change the bottom navigation bar state also, I think that I may access the controller in the tab screen. Any suggestions or ideas are accepted.

Answer 1

You can use some State management package like:

1. flutter_bloc

2. get

3. provider

4. etc... Or use a main StatefulWidget page to control the PersistentTabController and change automatically your: index like:

   PersistentTabController(index: value)