Curved navigation bar in flutter

user_10084055 0
Viewed 1588

Currently, I have a library in flutter https://pub.dev/packages/curved_navigation_bar and already implemented it in my project, but the problem is that when you navigating on item, icon color of selected item doesn't change. Is it possible to dynamically change icon color of selected item?

This is what by default:

enter image description here

And this is what I need:

enter image description here

Thanks!

dart flutter
3 Answers

I think this should work.

class HomeBottomNavigationBar extends StatefulWidget {

@override
_HomeBottomNavigationBarState createState() =>_HomeBottomNavigationBarState();
}


class _HomeBottomNavigationBarState extends State<HomeBottomNavigationBar> 
{

int pressedButtonNo = 0;

 @override
 Widget build(BuildContext context) {
   return CurvedNavigationBar(
   
   items: <Widget>[
    Icon(Icons.add, size: 30, color: (pressedButtonNo = 0)? Colors.Green : Colors.Black,),
    Icon(Icons.list, size: 30, color: (pressedButtonNo = 1)? Colors.Green : Colors.Black,),
    Icon(Icons.compare_arrows, size: 30, color: (pressedButtonNo = 2)? Colors.Green : Colors.Black,),
  ],
  onTap: (index) {
    setState () {
     pressedButtonNo = index;
    }
  },
);
}}

I have not tested it. Hope it works! Happy Coding:)

user_127787640

Even if it is late i found a way to do it:

return Scaffold(
  body: Stack(
    children: [
      _tabItems[_activePage],
      Align(
        alignment: Alignment.bottomCenter,
        child: CurvedNavigationBar(//your stuff),
      )
    ],
  ),
);
user_127787640

Two Properties are there

  1. buttonBackgroundColor: Colors.teal
  2. backgroundColor: Colors.transparent, check out
user_112822500
Related