How to toggle visibility of TabBar with Bottom Navigation Items in Flutter

0

I have a bottomNavigationBar and an AppBar in my flutter app. At the bottom of the AppBar is a TabBar consisting of two items. So I want the TabBar to be invisible when some items of the BottomNavigationBar is clicked. I tried to assign the Visibility class to my TabBar with a Boolean variable but it doesn't work. It seems like I can't handle the TabBar widget separately.

How do resolve this?

     class DashBoardPage extends StatefulWidget {
  @override
  _DashBoardPageState createState() => _DashBoardPageState();
}

class _DashBoardPageState extends State<DashBoardPage> {
  SharedPreferences sharedPreferences;
  bool showTabs = false;
  int tabsIndex = 0;
  int _currentIndex = 0;
  String _appBarText = "Welcome, User";

  Widget callPage(int currentIndex) {
    switch (currentIndex) {
      case 0:
        showTabs = true;
        _appBarText = "Welcome, User";
          return TabBarView(
           children:[
             new HomePage(),
             new SchedulePage()
           ]
          );
         break;
      case 1:
        showTabs = false;
        break;
      case 2:
        showTabs = false;
        break;
      default:
        return HomePage();
    }
  }

  @override
  void initState() {
    super.initState();
    checkLoginState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MAF Mentor',
      debugShowCheckedModeBanner: false,
      home: DefaultTabController(
        length: choices.length,
        child: Scaffold(
        appBar: AppBar(
          backgroundColor: Color(0xFFFFFFFF),
          title: Text(
            _appBarText,
            style: TextStyle(
              color: Color(0xFF1C2447),
              fontFamily: 'Muli',
              fontSize: 16.0,
            ),
          ),
          bottom:  showTabs? TabBar(
            isScrollable: true,
            tabs: choices.map<Widget>((Choice choice) {
              return Tab(
                text: choice.title,
                icon: Icon(choice.icon),
              );
            }).toList(),
            labelColor: Color(0xFF1C2447),
          ):null,
          actions: <Widget>[
            IconButton(
              icon: Icon(
                Icons.account_circle,
                color: Color(0xFF1C2447),
              ),
              onPressed: () {
                Navigator.of(context).pushNamed('/profile_page');
              },
            ),
            IconButton(
              icon: Icon(
                Icons.notifications,
                color: Color(0xFF1C2447),
              ),
              onPressed: () {
                // do something
              },
            ),
          ],
        ), //AppBar
        body: callPage(_currentIndex),
        bottomNavigationBar: BottomNavigationBar(
          showSelectedLabels: false,
          showUnselectedLabels: false,
          fixedColor: Color(0xFF1C2447),
          currentIndex: _currentIndex,
          onTap: (value) {
            _currentIndex = value;
            callPage(_currentIndex);
            setState(() {

            });
          },
          items: [
            BottomNavigationBarItem(
                icon: Icon(Icons.home), title: Text("Bar 1")),
            BottomNavigationBarItem(
                icon: Icon(Icons.people), title: Text("Bar 2")),
            BottomNavigationBarItem(
                icon: Icon(Icons.history), title: Text("Bar 3"))
          ],
        ),
      ),
      ),
    );
  }
flutter
tabbar
asked on Stack Overflow Jan 28, 2020 by bensofter • edited Jan 28, 2020 by bensofter

1 Answer

1

bottom requires a PreferredSizeWidget so you can not use the Visibility widget there. You can use a boolean variable to do that. You can see the whole code below. Since I don't know your choices and tabs I randomly put something. But the idea is if you want to show TabBar when user tap BottomNavigationBarItem number 1 you just update your boolean variable as true. Otherwise make it false.

class TabBarExample extends StatefulWidget {
  @override
  _TabBarExampleState createState() => _TabBarExampleState();
}

class _TabBarExampleState extends State<TabBarExample> {
  bool showTabs = false;
  int selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Color(0xFFFFFFFF),
          title: Text(
            '_appBarText',
            style: TextStyle(
              color: Color(0xFF1C2447),
              fontFamily: 'Muli',
              fontSize: 16.0,
            ),
          ),
          bottom: showTabs
              ? TabBar(
                  isScrollable: true,
                  tabs: <Widget>[
                    Tab(
                      text: 'Choice1',
                      icon: Icon(Icons.add_circle_outline),
                    ),
                    Tab(
                      text: 'Choice1',
                      icon: Icon(Icons.add_circle),
                    ),
                  ],
                  labelColor: Color(0xFF1C2447),
                )
              : null,
        ),
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: selectedIndex,
          items: [
            BottomNavigationBarItem(
                icon: Icon(Icons.home), title: Text('first')),
            BottomNavigationBarItem(
                icon: Icon(Icons.favorite), title: Text('second')),
          ],
          onTap: (index) {
            if (index == 1) {
              setState(() => showTabs = true);
            } else {
              setState(() => showTabs = false);
            }
            setState(() => selectedIndex = index);
          },
        ),
      ),
    );
  }
}

User contributions licensed under CC BY-SA 3.0