Flutter Base Bottom Navigation Bar Page Change

Viewed 67

I use the bottom navigation bar in Base View, but the active icon does not change when I change the page. I am using GetX and need help on how to do the redirects. I guess when I change the pages, it can't keep the state and rebuild happens. Therefore, the active icon does not change even if the page changes. I don't know if the baseview build is correct but as far as I can tell the problem seems to be with the redrawing of the screens..

BaseView

abstract class BaseView<T extends BaseController> extends StatelessWidget {
  BaseView({
    Key? key,
    this.navBarHide = true,
  }) : super(key: key);

  final bool navBarHide;
  final String? tag = null;
  final AppTextStyle appTextStyle = AppTextStyle();
  final FormValidationHelper formValidationHelper = FormValidationHelper();

  T get controller => GetInstance().find<T>(tag: tag);

  @override
  Widget build(BuildContext context) {
    return GetBuilder<T>(
      builder: (controller) {
        return Scaffold(
          //appBar: AppBar(title: Text(appBarTitle)),

          bottomNavigationBar: !navBarHide
              ? BottomNavigationBar(
                  onTap: (index) {
                    controller.tabChange(index);

                    if (index == 0) {
                      Get.to(DashBoardView(), binding: DashBoardBinding());
                    } else if (index == 1) {
                      Get.to(BlankView(), binding: BlankBinding());
                    } else if (index == 2) {
                      Get.to(HomeView(), binding: HomeBinding());
                    } else if (index == 3) {
                      Get.to(LanguagesView(), binding: LanguagesBinding());
                    } else if (index == 4) {
                      Get.to(MenuView(), binding: MenuBinding());
                    }
                 
                  },
                  unselectedLabelStyle: TextStyle(fontSize: 0),
                  unselectedFontSize: 0,
                  unselectedIconTheme: IconThemeData(
                    size: Get.width > 390 ? 24.sp : 24.sp,
                  ),
                  selectedFontSize: 0,
                  selectedIconTheme: IconThemeData(
                    size: Get.width > 390 ? 24.sm : 24.sm,
                  ),
                  selectedLabelStyle: TextStyle(fontSize: 0),
                  type: BottomNavigationBarType.fixed,
                  landscapeLayout: BottomNavigationBarLandscapeLayout.spread,
                  unselectedItemColor: Colors.black,
                  selectedItemColor: Colors.orange,
                  showSelectedLabels: true,
                  showUnselectedLabels: true,
                  currentIndex: controller.tabIndex.value,
                  items: [
                      _bottomNavbarItem(
                        AppAssets.card_icon,
                        '',
                        0,
                      ),
                      _bottomNavbarItem(
                        AppAssets.key_icon,
                        '',
                        1,
                      ),
                      _bottomNavbarItem(
                        AppAssets.home_icon,
                        '',
                        2,
                      ),
                      _bottomNavbarItem(AppAssets.doc_icon, '', 3),
                      _bottomNavbarItem(
                        AppAssets.menu_icon,
                        '',
                        4,
                      ),
                    ])
              : null,
          body: vBuilder(),
        
        );
      },
    );
  }

  Widget vBuilder();

  _bottomNavbarItem(String assetName, String label, int index) {
    return BottomNavigationBarItem(
      icon: Image.asset(
        assetName,
        width: 24.w,
        height: 24.h,
        fit: BoxFit.contain,
      ),
      activeIcon: Container(
        height: 24.h,
        width: 24.w,
        decoration: BoxDecoration(
          border: Border(
            bottom: BorderSide(width: 2, color: Colors.orange),
          ),
        ),
        child: Image.asset(assetName),
      ),
      label: label,
    );
  }
}
0 Answers
Related