CODEWITHSUNDEEP
flutterdart
Atamyrat Babayev
Atamyrat Babayev

Reputation: 905

Curved navigation bar in flutter

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!

Upvotes: 3

Views: 2543

Answers (3)

Haseeb Ur Rahman
Haseeb Ur Rahman

Reputation: 1

Two Properties are there

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

Upvotes: 0

Bensal
Bensal

Reputation: 4110

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

Upvotes: 0

Bensal
Bensal

Reputation: 4110

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:)

Upvotes: 2

Related Questions