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