How to shift tabs with a CupertinoTabBar ? Unlike the material tab bar we do not have tab controller to switch tabs

Question

I'm on the home tab and I need to shift to my second tab with the CupertinoTabBar. I do not have tabcontroller to shift with a global key like the material tab bar. Can you please suggest options ?

I have tried using a global key and changing the currentIndex of the tab. However, no luck. Have ran out of options.

HomeScreen.dart - Containing the tab

```Widget build(BuildContext context) {
    return new CupertinoTabScaffold(
      tabBar: CupertinoTabBar(
        key: HomeScreen._myTabbedPageKey,
        backgroundColor: Colors.black,
        currentIndex: _currentIndex,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
              icon: new Icon(Icons.home, color: Colors.white),
              activeIcon: new Icon(Icons.home,
                  color: Color.fromARGB(198, 39, 169, 227)),
              title: new Text(
                'Home',
                style: TextStyle(color: Color.fromARGB(198, 39, 169, 227)),
              )),
          BottomNavigationBarItem(
              icon: new Icon(Icons.track_changes, color: Colors.white),
              activeIcon: new Icon(Icons.track_changes,
                  color: Color.fromARGB(198, 39, 169, 227)),
              title: new Text(
                'Trips',
                style: TextStyle(color: Color.fromARGB(198, 39, 169, 227)),
              )),
          BottomNavigationBarItem(
              icon: new Icon(Icons.traffic, color: Colors.white),
              activeIcon: new Icon(Icons.traffic,
                  color: Color.fromARGB(198, 39, 169, 227)),
              title: new Text('Track',
                  style: TextStyle(color: Color.fromARGB(198, 39, 169, 227)))),
          BottomNavigationBarItem(
              icon: new Icon(Icons.settings, color: Colors.white),
              activeIcon: new Icon(Icons.settings,
                  color: Color.fromARGB(198, 39, 169, 227)),
              title: new Text('Settings',
                  style: TextStyle(color: Color.fromARGB(198, 39, 169, 227))))
        ],
      ),
      tabBuilder: (BuildContext context, int index) {
        if (_currentIndex != -1) {
          _currentIndex = index;
          return _children[_currentIndex];
        } else {
          return _children[index];
        }
      },
    );
  }```

HomeTab.dart - Containing the 'SEE MORE TRIPS' button. Click on the button should take me to second tab

 Widget build(BuildContext context) {
     return new CupertinoPageScaffold(
         backgroundColor: Colors.white,
         navigationBar: new CupertinoNavigationBar(
           middle: title,
           backgroundColor: Colors.black,
           automaticallyImplyLeading: false,
         ),
         child: new RefreshIndicator(
             key: _homeRefreshIndicatorKey,
             onRefresh: _refresh,
             child: new SingleChildScrollView(
               child: new Container(
                 child: new Center(
                   child: new Column(
                     // center the children
                     mainAxisAlignment: MainAxisAlignment.start,
                     children: <Widget>[
                       CupertinoButton(
                           color: Color.fromARGB(198, 39, 169, 227),
                           disabledColor: Colors.grey,
                           child: Text('SEE MORE TRIPS',
                               style: TextStyle(
                                   fontSize: 12,
                                   color: Colors.white,
                                   fontFamily: 'Lato')),
                           onPressed: () {
                             //to call second tab
                           }),
                       new SizedBox(
                         height: 16,
                       )
                     ],
                   ),
                 ),
               ),
             )));
 }```

To be navigated to second tab

Maybe you should use a `setState` call when you update the selectedIndex? Because according to the docs, all you'd have to is change a `currentIndex` variable to make it update correctly. Did you try that? — George, Jan 20 '19 at 15:30
@George - I'm not able to reference the global key to change the value of current index in my home tab. HomeScreen contains the CupertinoTabBar. And, i'm not able to get a reference of the global key in HomeTab to change the index with setState() method. — Raman Rajagopal, Jan 20 '19 at 15:34
@George - `HomeScreenState.of(context).state();` - I have included this line and I'm able to change the tabs to second position. However, this works only for my first click. My second click is called, however, it does not work. PFB details of the function with the name state(). `void state(){ setState((){ _currentIndex = 1; print("Current index : " + _currentIndex.toString()); }); }` — Raman Rajagopal, Jan 31 '19 at 07:38
@JoelHernandez - Still not found a solution. With above comments, it works intermittently. Shall we raise a case against flutter repo ?. — Raman Rajagopal, Mar 08 '19 at 08:30
I have opened an issue here https://github.com/flutter/flutter/issues/28992 and believe I found what's causing this. Feel free to upvote! — Joel Hernandez, Mar 08 '19 at 12:47

score 2 · Answer 1 · answered Jul 12 '21 at 10:26

You should use CupertinoTabController to change the tabbar index as expected , passing the instance of CupertinoTabController to CupertinoTabScaffold property of controller.

Finally, change the index programatically.

setState(() {
     _tabController.index = 0;
});

How to shift tabs with a CupertinoTabBar ? Unlike the material tab bar we do not have tab controller to switch tabs

1 Answers1