how to change icon color when navigate to another page in flutter? - flutter

Question

I made a BottomBar and make them enable to navigate to the other pages using onPressed function like below codes. but after navigating to other page that'd be can't change icon color because I think i made bottomnavigationbar: BottomBar in other page so that the page build BottomBar newly and 'int current Tab=0' is build again..
how can I change the way to can be change icon's color?
--BottomBar--
class BottomBar extends StatefulWidget {
const BottomBar({Key? key}) : super(key: key);
#override
State<BottomBar> createState() => BottomBarState();
}
class BottomBarState extends State<BottomBar> {
int currentTab = 0;
PageStorageBucket bucket = PageStorageBucket();
Widget currentScreen = HomePage();
final List<Widget> screens = [
HomePage(),
ShopPage(),
PeoplePage(),
WalletPage()
];
#override
Widget build(BuildContext context) {
return BottomAppBar(
shape: CircularNotchedRectangle(),
notchMargin: 10,
child: Container(
height: 60,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
MaterialButton(
minWidth: 40,
onPressed: (){
setState(() {
currentScreen = HomePage();
currentTab = 0;
});
Navigator.push(
context, MaterialPageRoute(builder: (context)=> HomePage())
);
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.home,
color: currentTab == 0? Colors.blue : Colors.grey,
),
],
),
),
MaterialButton(
minWidth: 40,
onPressed: (){
setState(() {
currentScreen = ShopPage();
});
Navigator.push(
context, MaterialPageRoute(builder: (context)=> const ShopPage())
);
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.shop,
color: currentTab == 1? Colors.blue : Colors.grey,
),
],
),
),
],
),
//Right Tab Bar Icons
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
MaterialButton(
minWidth: 40,
onPressed: (){
setState(() {
currentScreen = WalletPage();
currentTab = 2;
});
Navigator.push(
context, MaterialPageRoute(builder: (context)=> const WalletPage())
);
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.wallet,
color: currentTab == 2? Colors.blue : Colors.grey,
),
],
),
),
MaterialButton(
minWidth: 40,
onPressed: (){
setState(() {
currentScreen = PeoplePage();
currentTab = 3;
});
Navigator.push(
context, MaterialPageRoute(builder: (context)=> PeoplePage())
);
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.people,
color: currentTab == 3? Colors.blue : Colors.grey,
),
],
),
),
],
),
],
),
),
);
}
}
--the way I used BottomBar in the other page--
bottomNavigationBar: BottomBar(),

Answer 1

Consider trying this :
return SafeArea(
child: Scaffold(
extendBody: true,
body:pageOPtions[selectedPage]
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
backgroundColor: const Color(0xff282828),
currentIndex: selectedPage, //let's say it's 0
selectedLabelStyle: cardSecondaryTextStyle,
unselectedLabelStyle: cardSecondaryTextStyle,
selectedItemColor: const Color(0xffc8332c),
unselectedItemColor: const Color(0xff707070),
selectedIconTheme: const IconThemeData(color: Color(0xffc8332c)),
onTap: (index) {
setState(() {
selectedPage = index;
});
},
items: [
const BottomNavigationBarItem(
icon: Icon(
Icons.person,
color: Color(0xff707070),
size: 16,
),
activeIcon: Icon(
Icons.person,
color: Color(0xffc8332c),
size: 22,
),
label: 'Profile',
),
const BottomNavigationBarItem(
icon: Icon(
Icons.history,
color: Color(0xff707070),
size: 16,
),
activeIcon: Icon(
Icons.history,
color: Color(0xffc8332c),
size: 22,
),
label: 'Orders',
),
where pageOptions can be your screens like :
final pageOptions = [
const GeneralSettingsForm(),
const OrdersAndDelivery(),
];