How to change BottomNavigationBar item's color on Flutter?

Question

I've inserted custom icons into my application and when I run the app, the icons and text are white, instead of the original color.

Two Problems:

1)The Icons are originally black but when I insert it to my Bottom Nav Items they become white.

2)Also only the first item has a tittle beneath the icon the rest doesn't.

This is my code

      bottomNavigationBar: BottomNavigationBar(
      items: <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(const IconData(0xe903, fontFamily: 'navBar')),
          title: Text('Home'),
        ),
        BottomNavigationBarItem(
          icon: Icon(const IconData(0xe902, fontFamily: 'navBar')),
          title: Text('Ideas')
        ),
        BottomNavigationBarItem(
          icon: Icon(const IconData(0xe903, fontFamily: 'navBar')),
          title: Text('Profile')
        ),
        BottomNavigationBarItem(
            icon: Icon(const IconData(0xe901, fontFamily: 'navBar')),
            title: Text('Bag')
        ),

      ],
  ),

//pubspec.yaml file

  fonts:
- family: navBar
  fonts:
    - asset: assets/fonts/ic_navbar.ttf

The 4 icons

Answer 1

You need to add a type for your ButtomNavigationBar

    bottomNavigationBar: BottomNavigationBar(

        //Add this line will fix the issue.
        type: BottomNavigationBarType.fixed,

        currentIndex: 0, // this will be set when a new tab is tapped
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: new Icon(const IconData(0xe903, fontFamily: 'navBar')),
            title: new Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(const IconData(0xe902, fontFamily: 'navBar')),
            title: new Text('Messages'),
          ),
          BottomNavigationBarItem(
              icon: Icon(const IconData(0xe903, fontFamily: 'navBar')),
              title: Text('Profile'),
          ),
          BottomNavigationBarItem(
              icon: Icon(const IconData(0xe901, fontFamily: 'navBar')),
              title: Text('Bag')
          ),

        ],

      ),

Answer 2

Though it is a rather old thread I wanted to share a finding regarding this topic because I was in the same situation. According to flutter documentation it is expected behavior that item colors default is white if there are more than 3 items in the bottomnavigationbar and there is no selectedItemColor.

BottomNavigationBarType.shifting, the default when there are four or more items. If selectedItemColor is null, all items are rendered in white. The navigation bar's background color is the same as the BottomNavigationBarItem.backgroundColor of the selected item. In this case it's assumed that each item will have a different background color and that background color will contrast well with white.

Flutter Api reference

Answer 3

try the icons that come in the material icons, https://docs.flutter.io/flutter/material/Icons-class.html to make a kind of debug, if the error continues the error is in another side, can you send all the code and send the assets you use? enter image description here

Answer 4

You can use the following code to change the icon color in bottom navigation bar

BottomNavigationBarItem(
 icon:IconTheme(child: Icon(Icons.date_range),
   data:IconThemeData(color:Colors.yellow)),
 title:Text('Schedule')
)