Bottom tab navigator (PersistentTabView)- Rebuild the screen when user tabs the menu

Question

I am currently using persistent_bottom_nav_bar: ^4.0.2 in my project app and here is the part of the code:

PersistentTabView(
                context,
                onItemSelected: (index) {
                  mainState.value = MainTabModel(
                      selectedIndex: index,
                      connectionStatus: mainState.value.connectionStatus);
                  if (index == 1) {
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) =>
                                PinPayrol(statusPin: "input_pin"))).then((x) {
                      if (x != null)
                        mainState.value = MainTabModel(
                            selectedIndex: index,
                            connectionStatus: mainState.value.connectionStatus);
                      else
                        Navigator.push(
                            context,
                            MaterialPageRoute(
                                builder: (context) => BottomTab()));
                      mainState.notifyListeners();
                    });
                  } else
                    mainState.value = MainTabModel(
                        selectedIndex: index,
                        connectionStatus: mainState.value.connectionStatus);
                },
                controller: _controller,
                screens: _buildScreens(),
                items: _navBarsItems(),
                confineInSafeArea: true,
                backgroundColor: Colors.white,
                handleAndroidBackButtonPress: true,
                resizeToAvoidBottomInset: true,
                stateManagement: false,
                hideNavigationBarWhenKeyboardShows: true,
                decoration: NavBarDecoration(
                  borderRadius: BorderRadius.circular(10.0),
                  colorBehindNavBar: Colors.white,
                ),
                popAllScreensOnTapOfSelectedTab: true,
                popActionScreens: PopActionScreensType.all,
                itemAnimationProperties: ItemAnimationProperties(
                  duration: Duration(milliseconds: 200),
                  curve: Curves.ease,
                ),
                screenTransitionAnimation: ScreenTransitionAnimation(
                  animateTabTransition: true,
                  curve: Curves.ease,
                  duration: Duration(milliseconds: 200),
                ),
                navBarStyle: NavBarStyle.style15,
              )

Let's say I have menu A for screen A, menu B for screen B,...,menu E for screen E. But the problem is when I set stateManagement: true and then I tab B menu, initState in B menu is not running, so I change stateManagement: false and when I tab B menu all of the screen (from A to E screens) are rebuilt. What I want to do is, when I click one of the menu it will only rebuild the screen it self, is there a way to do that ? Actually my case is the same as this: https://github.com/BilalShahid13/PersistentBottomNavBar/issues/268

Answer 1

To rebuild only screen A everytime when bottom nav bar click not B and C Use this:

Inside PersistentBottomNavBarItem( OnPressed: setstate to _controller.index=0 0 represent that screen index you want to rebuild )

Answer 2

I faced the same problem and i manage to solve it by adding a ternary expression on _controller.index with the index of the widget that i want to rebuild

Example : stateManagement: (_controller.index==2) ? false : true,

Result : All other widgets will no rebuilt, only widget of index 2 will be rebuilt if PersistentBottomNavBar clicked

Note : After the rebuilt of widget with the index 2 the BottomNavBar will rebuilt all widget after