When pressing the icon on CupertinoTabScaffold in Flutter, it doesn't take me back to the route route. Is there a way to do this?

Question

This is my bottom navigation:

This is my code:

CupertinoTabScaffold(
          tabBar: CupertinoTabBar(
              backgroundColor: const Color(0xFF142634),
              activeColor: Colors.orange,
              inactiveColor: Colors.white,
              items: const [
                BottomNavigationBarItem(icon: Icon(Icons.home)),
                BottomNavigationBarItem(icon: Icon(Icons.sports_basketball)),
                BottomNavigationBarItem(icon: Icon(Icons.event)),
                BottomNavigationBarItem(icon: Icon(Icons.account_balance_sharp))
              ]),
          tabBuilder: (context, index) {
            switch (index) {
              case 1:
                return CupertinoTabView(
                    builder: (context) => const BasketballPage());
              case 2:
                return CupertinoTabView(builder: (context) => const Events());
              case 3:
                return CupertinoTabView(
                    builder: (context) => const Standings());
              case 0:
              default:
                return CupertinoTabView(builder: (context) => const Home());
            }
          }),

Is there a simple way for when you are a few stacks into one of the navigation, you can press the icon on the bottom and it will take u back to the route page. I tried using GestureDector and onTap, but I couldn't find where in the code that would work.

For example, in the picture above, let's say that you are a few routes deep into that tab view, and you want to go home just by pressing on that columns/house icon. How would I be able to do that with my code right now.

Munsif Ali · Answer 1 · 2023-02-14T16:36:51.143

0

make this widget statefull or manage the state using your favorite state management create a variable for index of of the tab and in the onTap of the CupertinoTabBar change the index like this:

CupertinoTabBar(
  backgroundColor: const Color(0xFF142634),
  activeColor: Colors.orange,
  inactiveColor: Colors.white,
  items: const [
    BottomNavigationBarItem(icon: Icon(Icons.home)),
    BottomNavigationBarItem(icon: Icon(Icons.sports_basketball)),
    BottomNavigationBarItem(icon: Icon(Icons.event)),
    BottomNavigationBarItem(icon: Icon(Icons.account_balance_sharp))
  ],
  onTap: (value) {
    setState(() {
      currentIndex = value;
    });
  },
)

it is the result of your code

edited Feb 14 '23 at 16:36

answered Feb 14 '23 at 16:14

Munsif Ali

1,839
1
8
22

Where am I setting the currentIndex? – splurring Feb 14 '23 at 16:20
your code is working correct with me i attached the screen recording check it in the answer try "flutter clean" and "flutter pub get" commands in the terminal and hope it will work for you – Munsif Ali Feb 14 '23 at 16:36

When pressing the icon on CupertinoTabScaffold in Flutter, it doesn't take me back to the route route. Is there a way to do this?

1 Answers1