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

2.3k Views Asked by At

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




1

There are 1 best solutions below

0
On

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;
});