Flutter BottomNavigationBar Colors

Question

I am trying to change the selected color of a BottomNavigation icon but all I seem to be achieving is changing the text colours. Please assist:

Currently the text color changes to yellow when selected but the icon stays white, I want it to be yellow too and I have tried setting the icon color of the inactive icons to grey like the caption but it's not budging.

Here is my code:

new Theme(
        data: Theme.of(context).copyWith(
          canvasColor: Colors.black,
          splashColor: Colors.yellowAccent,
            unselectedWidgetColor: Colors.green,
          primaryColor: Colors.red,
          textTheme: Theme.of(context).textTheme.copyWith(caption: new TextStyle(color: Colors.grey))
        ),
        child: new BottomNavigationBar(
          items: <BottomNavigationBarItem>[
            new BottomNavigationBarItem(
                icon: const Icon(Icons.add_shopping_cart, color: Colors.white,),
                title: new Text("Services"),
            ),
            new BottomNavigationBarItem(
                icon: new Theme(
                  data: new ThemeData(

                  ),
                    child: const Icon(Icons.calendar_today, color: Colors.white,)),
                title: new Text("Appointment")
            ),
            new BottomNavigationBarItem(
                icon: const Icon(Icons.face, color: Colors.white,),
                title: new Text("Profile")
            )
          ],
          currentIndex: index,
          onTap: (int i){setState((){index = i;});},
          fixedColor: Colors.yellowAccent,
          type: BottomNavigationBarType.fixed,
        ),
      )

Answer 1

You've explicitly set color: Colors.white for each of the icons, so they will be white until you set them otherwise.

You have a couple of options:

1) Set your BottomNavigationBar's type to type: BottomNavigationBarType.fixed and set fixedColor: Colors.orange or whatever color you want. Note that you'll have to remove your color: Colors.white or they will still be white.

2) You could test for the right index being set and then decide which color to set the icon to directly, i.e. color = index == 0 ? selectedColor : unselectedColor for the first item, index==1 for the second, and item==2 for the third.

3) A slight alternative would be to set an IconTheme with color=unselectedColor around the entire BottomNavigationBar, then only set the selected item with color = index == 0 ? selectedColor : null.

I'd recommend reading the BottomNavigationBar documentation, particularly the part about fixed vs shifting, as it describes the answer to the exact problem you're having.

Answer 2

Don't declare the color of icon inside BottomNavigationBarItem. You should declare it inside BottomNavigationBar as unselectedItemColor and unselectedItemColor.

    bottomNavigationBar: BottomNavigationBar(
    unselectedItemColor: Colors.green,
    selectedItemColor: Colors.yellow,
    items:[ 
    new BottomNavigationBarItem(icon:Icon(Icons.add_shopping_cart))
    ]

By doing so, your code will work.