How can I change the background color of the active button?-CodePudding

How can I change the background color of the active button in the bottom navigation bar? As in the picture.

CodePudding user response：

BottomNavigationBar(
 backgroundColor: Colors.blue,
 selectedItemColor: Colors.white,
 unselectedItemColor: Colors.black,
 items: [
  BottomNavigationBarItem(
   backgroundColor: Colors.red,
   icon: const Icon(Icons.home),
   )
  ]
)

Is this what you're looking for?

CodePudding user response：

there is activeIcon property in BottomNavigationBarItem,

try this code:

BottomNavigationBarItem(
          activeIcon: Container(
            width: 70,
            height: 34,
            decoration: BoxDecoration(
                color: Colors.blue.shade100,
                borderRadius: BorderRadius.circular(15)),
            child: Icon(Icons.home_rounded),
          ),
          icon: Icon(Icons.home_outlined),
          label: '',
        ),

the result:

make sure to make sizes responsive.