Search code examples
flutterflutter-layoutflutter-animation

How to disable bottomnavigationbar some pages in flutter?


Thank you for checking my question.

I'm now get some problem in my flutter project.

I want to disable bottomnavigationbar when I click 'Search' icon on bottomnavigationbar. I hope that the bottomnavigationbar isn't showed on 'SearchOnScreen'.

You can check in my codes.

What codes should I change?

Thank you.

class RootTab extends StatefulWidget {
  const RootTab({Key? key}) : super(key: key);

  @override
  State<RootTab> createState() => _RootTabState();
}

class _RootTabState extends State<RootTab> with
SingleTickerProviderStateMixin{
  late TabController controller;

  int index = 0;

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

    controller = TabController(length: 3, vsync: this);

    controller.addListener(tabListner);
  }

  @override
  void dispose() {
    controller.removeListener(tabListner);
    super.dispose();
  }

  void  tabListner(){
    setState(() {
      index = controller.index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return DefaultLayout(
      child: TabBarView(
        physics: NeverScrollableScrollPhysics(),
        controller: controller,
        children: [
          SearchOffScreen(),
          SearchOnScreen(),      <--- I want to disable bottomnavigationbar in this page.
          Center(child: Container(child: Text('My page'),)),
        ],
      ),
      bottomNavigationBar: Theme(
        data: ThemeData(
          splashColor: Colors.transparent,
          highlightColor: Colors.transparent,
        ),
        child: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          onTap: (int index){
            controller.animateTo(index);
            this.index = index;
          },
          currentIndex: index,
          items: [
            BottomNavigationBarItem(
                icon: Icon(Icons.home_filled),
                label: 'Home'),
            BottomNavigationBarItem(
                icon: Icon(Icons.search_rounded),
                label: 'Search'),
            BottomNavigationBarItem(
                icon: Icon(Icons.person),
                label: 'My page'),
          ],
        ),
      ),
    );
  }
}

Solution

  • To achieve this you can use this package it will provide many custom designs and properly hide the bottom bar on the keyboard as well as manual use (this package provide persistent tabs). For now you fill it's to difficult but once you complete it. In the future in all you will use it.

    package: persistent bottom bar

    hideNavigationBarWhenKeyboardShows: true, 
    hideNavigationBar: _SET BOLLEAN FLAG HERE
    

    Let me know if you still face issues (don't forgot to checkout example in case how to implement it).