Как переключить видимость TabBar с помощью элементов нижней навигации во флаттере

Question

У меня есть bottomNavigationBar и AppBar в моем flutter приложении. В нижней части панели приложений находится TabBar, состоящий из двух элементов. Поэтому я хочу, чтобы TabBar был невидимым при нажатии на некоторые элементы из BottomNavigationBar. Я попытался присвоить класс Visibility моему TabBar с помощью переменной Boolean, но он не работает. Кажется, я не могу обработать виджет TabBar отдельно.

Как решить эту проблему?

     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"))
          ],
        ),
      ),
      ),
    );
  }

Answer 1

bottom требует PreferredSizeWidget, поэтому вы не можете использовать там виджет Visibility. Вы можете использовать логическую переменную для этого. Вы можете увидеть весь код ниже. Так как я не знаю ваш выбор и вкладки, я случайно что-то положил. Но идея в том, что если вы хотите показать TabBar, когда пользователь нажмет BottomNavigationBarItem номер 1, вы просто обновите свою логическую переменную как true. В противном случае сделайте это ложным.

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