How can i hide my bottom nav bar on button pressed, flutter?-CodePudding

I have a widget CustomerView widget that holds a bottomNavigationBar button, when this button is clicked i want to hide my bottom navigation bar and when the button is clicked again, i want to show the bottom navigation bar.

This is how the UI looks with the button and my bottom nav bar:

Here is the controller for the Navigation bar:

class RootController extends GetxController {
  final currentIndex = 0.obs;
  final notificationsCount = 0.obs;
  final customPages = <CustomPage>[].obs;
  NotificationRepository _notificationRepository;
  CustomPageRepository _customPageRepository;
  RootController() {
    _notificationRepository = new NotificationRepository();
    _customPageRepository = new CustomPageRepository();
  }

  @override
  void onInit() async {
    await getCustomPages();
    if (Get.arguments != null && Get.arguments is int) {
      changePageInRoot(Get.arguments as int);
    } else {
      changePageInRoot(0);
    }
    super.onInit();
  }

  List<Widget> pages = [
    HomeView(),
    JobsView(),
    CustomersView(),
    MessagesView(),
    AccountView(),
  ];

  Widget get currentPage => pages[currentIndex.value];

  /**
   * change page in route
   * */
  void changePageInRoot(int _index) {
    currentIndex.value = _index;
  }
  
  void changePageOutRoot(int _index) {
    currentIndex.value = _index;
    Get.offNamedUntil(Routes.ROOT, (Route route) {
      if (route.settings.name == Routes.ROOT) {
        return true;
      }
      return false;
    }, arguments: _index);
  }

  Future<void> changePage(int _index) async {
    if (Get.currentRoute == Routes.ROOT) {
      changePageInRoot(_index);
    } else {
      changePageOutRoot(_index);
    }
    await refreshPage(_index);
  }

  Future<void> refreshPage(int _index) async {
    switch (_index) {
      case 0:
        {
          await Get.find<HomeController>().refreshHome();
          break;
        }
      case 2:
        {
          await Get.find<MessagesController>().refreshMessages();
          break;
        }
    }
  }

  void getNotificationsCount() async {
    notificationsCount.value = await _notificationRepository.getCount();
  }

  Future<void> getCustomPages() async {
    customPages.assignAll(await _customPageRepository.all());
  }
}

This is the View code for the Navigation Bar:

class RootView extends GetView<RootController> {
  @override
  Widget build(BuildContext context) {

    return Obx(() {
      return Scaffold(
        drawer: MainDrawerWidget(),
        
        body: controller.currentPage,
        bottomNavigationBar: CustomBottomNavigationBar(
          
          backgroundColor: Color(0xffFFFFFF),
          itemColor: Color(0xffB0BEC1),
          currentIndex: controller.currentIndex.value,
          onChange: (index) {
            controller.changePage(index);
          },
          children: [
            CustomBottomNavigationItem(
              icon: Icons.home_filled,
              label: "Home".tr,
            ),
            CustomBottomNavigationItem(
              icon: Icons.book_outlined,
              label: "Jobs".tr,
            ),
            
            CustomBottomNavigationItem(
              
              icon: Icons.people_outlined,
              label: "Customers".tr,
            ),
            CustomBottomNavigationItem(
              icon: Icons.chat_outlined,
              label: "Messages".tr,
            ),
            CustomBottomNavigationItem(
              icon: Icons.person_outline_rounded,
              label: "Account".tr,
            ),
          ],
        ),
      );
    });
  }
}

And this is the CustomBottomNavigationBar widget itself



const Color PRIMARY_COLOR = Colors.blueAccent;
const Color BACKGROUND_COLOR = Color(0xffE2E7F2);

class CustomBottomNavigationBar extends StatefulWidget {
  final Color backgroundColor;
  final Color itemColor;
  final List<CustomBottomNavigationItem> children;
  final Function(int) onChange;
  final int currentIndex;

  CustomBottomNavigationBar(
      {this.backgroundColor = BACKGROUND_COLOR,
      this.itemColor = PRIMARY_COLOR,
      this.currentIndex = 0,
      @required this.children,
      this.onChange});

  @override
  _CustomBottomNavigationBarState createState() =>
      _CustomBottomNavigationBarState();
}

class _CustomBottomNavigationBarState extends State<CustomBottomNavigationBar> {
  
  void _changeIndex(int index) {
    if (widget.onChange != null) {
      widget.onChange(index);
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(15.0),
      height: MediaQuery.of(context).size.height * 0.11,
      color: widget.backgroundColor,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: widget.children.map((item) {
          var icon = item.icon;
          var label = item.label;
          int index = widget.children.indexOf(item);
          return GestureDetector(
            onTap: () {
              _changeIndex(index);
            },
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                Icon(
                  icon,
                  size: 24,
                  color: widget.currentIndex == index
                      ? Color(0xff34495E)
                      : Color(0xff7F8D90),
                ),
                Expanded(
                  flex: 2,
                  child: Text(
                    label ?? '',
                    // overflow: TextOverflow.ellipsis,
                    textAlign: TextAlign.justify,
                    style: TextStyle(
                        fontSize: MediaQuery.of(context).size.width * 0.03,
                        color: widget.currentIndex == index
                            ? Color(0xff34495E)
                            : Color(0xff7F8D90)),
                  ),
                )
              ],
            ),
          );
        }).toList(),
      ),
    );
  }
}

class CustomBottomNavigationItem {
  final IconData icon;
  final String label;
  final Color color;

  CustomBottomNavigationItem(
      {@required this.icon, @required this.label, this.color});
}

How do i achieve this?

I have tried checking articles on here, but all of them seem to only tell me how to hide bottom navigation bar on scroll.

Thank you!

CodePudding user response：

First, add a bool in controller to control the visibility

class RootController extends GetxController {
 var isBottomBarVisible = true.obs;
 
  void toggleBottomBar() {
       isBottomBarVisible.value = !isBottomBarVisible.value;
  }

Then Wrap your bottom bar with visibility widget

bottomNavigationBar: Visibility(
  visible: controller.isBottomBarVisible.value,
  child: CustomBottomNavigationBar(),
)

Done. Just change this bool isBottomBarVisible to see the result.

CodePudding user response：

Just add the isClicked check on the bottomNavigationBar property and as it accepts any Widget class, so if you want to hide it, it will hide and display a SizedBox of height 0 when you want to hide it.

 class RootView extends GetView<RootController> {
 bool isClicked = false; 
 @override
 Widget build(BuildContext context) {

   return Obx(() {
    return Scaffold(
     drawer: MainDrawerWidget(),
     body: controller.currentPage,
     bottomNavigationBar:isClicked? CustomBottomNavigationBar(
      
      backgroundColor: Color(0xffFFFFFF),
      itemColor: Color(0xffB0BEC1),
      currentIndex: controller.currentIndex.value,
      onChange: (index) {
        controller.changePage(index);
      },
      children: [
        CustomBottomNavigationItem(
          icon: Icons.home_filled,
          label: "Home".tr,
        ),
        CustomBottomNavigationItem(
          icon: Icons.book_outlined,
          label: "Jobs".tr,
        ),
        
        CustomBottomNavigationItem(
          
          icon: Icons.people_outlined,
          label: "Customers".tr,
        ),
        CustomBottomNavigationItem(
          icon: Icons.chat_outlined,
          label: "Messages".tr,
        ),
        CustomBottomNavigationItem(
          icon: Icons.person_outline_rounded,
          label: "Account".tr,
        ),
      ],
    ) : SizedBox(),
  );
});

} }