flutterflutter-bottomnavigation

Flutter Bottom navigation bar issue


I have a problem with my Bottom Navigation bar in flutter. Specifically the property:

unselectedItemColor is not working

I have tried to set the color to red but I does not work as expected.

Find my code below:

bottomNavigationBar: BottomNavigationBar( 
      items: [
        BottomNavigationBarItem(
          icon: Icon(
              Icons.home_rounded, size: 35,color: color.AppColor.activeBottomMenuIcon,
              ),
          label: 'First'
         
         ),
         BottomNavigationBarItem(
              icon: Icon(Icons.favorite_rounded, size:   35,color: color.AppColor.unActiveBottomMenuIcon,),
          label: 'Second'
        ),
      BottomNavigationBarItem(
           icon: Icon(Icons.add_circle_rounded, size: 45,color:color.AppColor.addItemIcons,),
          label: 'Third'
        ),
      BottomNavigationBarItem(
           icon: Icon(Icons.messenger_rounded, size: 35,color: color.AppColor.unActiveBottomMenuIcon,),
          label: 'Fourth'
        ),
      BottomNavigationBarItem(
            icon: Icon(Icons.person_rounded, size: 35,color: color.AppColor.unActiveBottomMenuIcon,),
          label: 'Fith',
        ),
      ],
    selectedItemColor: color.AppColor.activeBottomMenuIcon,
    unselectedItemColor: Colors.red,
    //selectedItemColor: Colors.red,
      //Calling method to change state
      onTap: _onItemTapped,

      currentIndex: _selectedIndex,
      ),
    //bottomNavigationBar

             

Solution

  • Remove the icon color from the icon and let the navigation bar handle the color for that selected icon

    here is your updated code

    bottomNavigationBar: BottomNavigationBar(
            items: [
              BottomNavigationBarItem(
                  icon: Icon(
                    Icons.home_rounded,
                    size: 35,
                    
                  ),
                  label: 'First'),
              BottomNavigationBarItem(
                  icon: Icon(
                    Icons.favorite_rounded,
                    size: 35,
                   
                  ),
                  label: 'Second'),
              BottomNavigationBarItem(
                  icon: Icon(
                    Icons.add_circle_rounded,
                    size: 45,
                    
                  ),
                  label: 'Third'),
              BottomNavigationBarItem(
                  icon: Icon(
                    Icons.messenger_rounded,
                    size: 35,
                   
                  ),
                  label: 'Fourth'),
              BottomNavigationBarItem(
                icon: Icon(
                  Icons.person_rounded,
                  size: 35,
                  
                ),
                label: 'Fith',
              ),
            ],
            selectedItemColor: Colors.amber,
            unselectedItemColor: Colors.red,
           
            onTap: _onItemTapped,
    
            currentIndex: _selectedIndex,
          ),