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.

CodePudding user response：

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.

CodePudding user response：

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.