how to apply setstate in flutter? - flutter

Question

I'm making bottomNavigationBar and I want to make theirs buttons changed color when it's clicked. So I made a state that is 'currentTab' and I used it in each buttons's setState(). but It's not working and there's no specific error. Could you review my code below?
class BottomBar extends StatefulWidget {
#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(),
NftPage()
];
#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();
currentTab = 1;
});
Navigator.push(
context, MaterialPageRoute(builder: (context)=> ShopPage())
);
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.shopping_bag_outlined,
color: currentTab == 1? Colors.blue : Colors.grey,
),
],
),
),
],
),
//Right Tab Bar Icons
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
MaterialButton(
minWidth: 40,
onPressed: (){
setState(() {
currentScreen = NftPage();
currentTab = 2;
});
Navigator.push(
context, MaterialPageRoute(builder: (context)=> const NftPage())
);
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.account_balance_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,
),
],
),
),
],
),
],
),
),
);
}
}
In Rows, there are MaterialButtons and I applied setstate in there.

Answer 1

Because when it try to rebuild view you navigate to other screen, try this:
onPressed: (){
setState(() {
currentScreen = PeoplePage();
currentTab = 3;
});
WidgetsBinding.instance.addPostFrameCallback((_) {
Navigator.push(
context, MaterialPageRoute(builder: (context)=> PeoplePage())
);
});
},
do this in all yours onPressed.

Answer 2

You are using setState in the onPressed of the MaterialButton.
You should use setState in the build method of the widget.
For example:
class BottomBar extends StatefulWidget {
#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(),
NftPage()
];
#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: (){
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: (){
Navigator.push(
context, MaterialPageRoute(builder: (context)=> ShopPage())
);
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.shopping_bag_outlined,
color: currentTab == 1? Colors.blue : Colors.grey,
),
],
),
),
],
),
//Right Tab Bar Icons
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
MaterialButton(
minWidth: 40,
onPressed: (){
Navigator.push(
context, MaterialPageRoute(builder: (context)=> const NftPage())
);
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.account_balance_wallet,
color: currentTab == 2? Colors.blue : Colors.grey,
),
],
),
),
MaterialButton(
minWidth: 40,
onPressed: (){
Navigator.push(
context, MaterialPageRoute(builder: (context)=> PeoplePage())
);
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.people,
color: currentTab == 3? Colors.blue : Colors.grey,
),
],
),
),
],
),
],
),
),
);
}
}
In Rows, there are MaterialButtons and I applied setstate in there.