Flutter中的自定义底部导航栏项目装饰

Question

I am trying to build something like this UI

In this the selected Bottom Navigation Bar Item should be highlighted with a background color.

Currently, I've done this:

bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        fixedColor: Colors.black,
        currentIndex: _selectedIndex,
        showSelectedLabels: false,
        showUnselectedLabels: false,
        onTap: _onItemTapped,
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home_outlined),
            label: '',
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.checklist_outlined), label: ''),
          BottomNavigationBarItem(
              icon: Icon(Icons.file_copy_outlined), label: ''),
          BottomNavigationBarItem(
              icon: Icon(Icons.notifications_outlined), label: ''),
          BottomNavigationBarItem(
              icon: Icon(Icons.settings_outlined), label: ''),
        ],
      ),

Answer 1

If you want the selected tab to have yellow background color when selected, one way is to wrap the icon with a Container and set color based on _selectedIndex

icon: Container(
  width: 40,
  height: 40,
  decoration: BoxDecoration(
    color: _selectedIndex == 0 ? Colors.yellow : Colors.transparent,
    borderRadius: BorderRadius.circular(200)
  ),
  child: Icon(Icons.home_outlined)
)