CODEWITHSUNDEEP
flutterflutter-bottomnavigation
Bruno Ganontha Payang
Bruno Ganontha Payang

Reputation: 5

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

Upvotes: 0

Views: 37

Answers (1)

Shakila
Shakila

Reputation: 1059

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

Upvotes: 0

Related Questions