how to make background color on selected icon of navigation bar/ bottom app bar

Question

I want to make the selected icon on navigation bar have some background color on it, somehow it will become like this. This is my code.

BottomNavigationBar bottom_navbar_home(){  
   return BottomNavigationBar( 
      type: BottomNavigationBarType.fixed,
      selectedItemColor: Colors.black,
              items: [
                BottomNavigationBarItem(icon: Icon(Icons.home_filled), label: 'Home'),
                BottomNavigationBarItem(
                    icon: Icon(Icons.feed_outlined), label: 'Activity'),
                BottomNavigationBarItem(
                    icon: Icon(Icons.account_balance_wallet_outlined),
                    label: 'Wallet'),
                BottomNavigationBarItem(
                    icon: Icon(Icons.chat_bubble_outline),
                    label: 'Notification'),
                BottomNavigationBarItem(
                    icon: Icon(Icons.settings), label: 'Settings'),
              ],

   );
}

Answer 1

I'm not sure you'll like this solution, but you can change the color of the selected Icon (or changing the Selected icon to another). for that, you can just use the activeIcon property to change the color of the Icon you selected, like this:

BottomNavigationBarItem(
              icon: Icon( Icons.account_balance_wallet_outlined,
                          color: Colors.black,
              ),
              label: 'Wallet', 
              activeIcon:Icon(Icons.account_balance_wallet_outlined,color: Colors.black,)
          ),

This will look better if you change the type property of the BottomNavigationBar to: type: BottomNavigationBarType.shifting, which is recomended when the BottomNavigationBar has more than three (3) items