How can i disable a particular tab in CupertinoTabView, to be able to click?

Question

I want when the user is not logged in the tabs will be disabled except the tab of "Mon Compte" and "Annonces" will be activated. Is there a way to turn off a particular tab in the CupertinoTabView? so that it cannot be clicked unless the user is logged in? or how can I change index if the user is not connected Any help is welcome, thank you!

class BottomMenu extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _BottomMenuState();
  }
}

class _BottomMenuState extends State<BottomMenu> {
   static int currentTab = 3; // to keep track of active tab index


 @override
  Widget build(BuildContext context) {


    SystemChrome.setSystemUIOverlayStyle(
      SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
        statusBarBrightness: Brightness.light,
        systemNavigationBarColor: Colors.transparent,
        systemNavigationBarIconBrightness: Brightness.light,
      ),
    );

    return CupertinoTabScaffold(
      tabBar: CupertinoTabBar(
        currentIndex:  currentTab ,
        activeColor: Theme.of(context).primaryColor,
        backgroundColor: Theme.of(context).backgroundColor,
        inactiveColor: Theme.of(context).disabledColor,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            title: Text(
                "Matching"
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.dashboard),
            title:
            Text(
                "Annonces"
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(MenuIcon.favorite__1_),
            title:
            Text("Favoris"),
          ),
          BottomNavigationBarItem(
            icon: Icon(MenuIcon.user__1_),
            title: Text(
                "Mon Compte"
            ),
          ),
        ],
      ),
      tabBuilder: (context, index) {
        switch (index) {

          case 0:
            return CupertinoTabView(builder: (context) {


                return CupertinoPageScaffold(
                  child: Matching(),
                );

            }

            );
          case 1:
            return CupertinoTabView(builder: (context) {

              return CupertinoPageScaffold(
                child: Offers(),
              );
            });
          case 2:
            return CupertinoTabView(builder: (context) {

              return CupertinoPageScaffold(
                child: Favorites(),
              );
            });
          default: return CupertinoTabView(

              builder: (context) {

            return CupertinoPageScaffold(
              child: Login(),
            );
          });
        }
      },
    );

  }
}

Answer 1

I know this question is quite old, but I recently faced the same issue and noticed there isn't a solution yet. Here's how I solved it:

You can use a CupertinoTabController to control the tab selection in a CupertinoTabBar. By listening to changes in the controller, you can prevent users from selecting restricted tabs and keep them on the allowed ones.

@override
void initState() {
  _tabController = CupertinoTabController(initialIndex: widget.initialIndex)
    ..addListener(() {
      setState(() {
        // `enabledIndexes` contains the list of allowed tab indexes
        if (!widget.enabledIndexes.contains(_tabController.index)) {
          // Redirect the user back to the initial allowed tab
          _tabController.index = widget.initialIndex;
        }
      });
    });
  super.initState();
}

Explanation:

• When the user taps on a tab, the CupertinoTabController emits a change.
• If the selected tab index is not in the enabledIndexes list, the tab controller redirects the user back to the initial tab (widget.initialIndex).
• This redirection happens smoothly without a noticeable UI jump.

You can also customize this logic to redirect the user to the previously selected tab by saving the current index in the state and using it as the fallback tab.

Hope this helps someone else in the future!