如何更改选项卡栏图标选择时的背景颜色？

Question

这是我想设置的当选择选项卡时或我想尝试当用户从选项卡栏中选择一个选项卡时我想更改所选选项卡的背景颜色。

Tab（文本：StringConstant.cricketTitle，图标：图标（Icons.sports_cricket_outlined，颜色：Colors.white，），），

常量 TabBar( 分隔线高度：0， 填充：EdgeInsets.zero， 指示器颜色：颜色.白色， IndicatorPadding：EdgeInsets.zero， labelPadding：EdgeInsets.zero， 自动指示器颜色调整：假， 未选择的LabelStyle：const TextStyle（颜色：white40，），

          tabs: [
            Tab(
              text: StringConstant.cricketTitle,
              icon: Icon(Icons
                  .sports_cricket_outlined,) /*ImageIcon(AssetImage(ImagePathConstant.cricketImage))*/,
            ),
            Tab(
              text: StringConstant.footBallTitle,
              icon: Icon(Icons
                  .sports_soccer) /*ImageIcon(AssetImage(ImagePathConstant.footBallImage))*/,
            ),
            Tab(
              text: StringConstant.kabaddiTitle,
              icon: Icon(Icons
                  .sports_kabaddi_outlined) /*ImageIcon(AssetImage(ImagePathConstant.kabbadiImage))*/,
            ),
            Tab(
              text: StringConstant.basketBallTitle,
              icon: Icon(Icons
                  .sports_basketball_outlined) /* ImageIcon(AssetImage(ImagePathConstant.basketBallImage))*/,
            ),
            Tab(
              text: StringConstant.volleyBallTitle,
              icon: Icon(Icons
                  .sports_volleyball_outlined) /* ImageIcon(AssetImage(ImagePathConstant.volleyBallImage))*/,
            ),
          ])

Answer 1

使用底部导航栏如下：

int _selectedIndex = 0;
    bottomNavigationBar: BottomNavigationBar(
            items: <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                icon: _selectedIndex == 0
                    ? Container(
                  padding: EdgeInsets.all(10),
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Colors.blue, // Background color when selected
                  ),
                  child: Icon(Icons.home),
                )
                    : Icon(Icons.home),
                label: 'Home',
              ),
              BottomNavigationBarItem(
                icon: _selectedIndex == 1
                    ? Container(
                  padding: EdgeInsets.all(10),
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Colors.blue, // Background color when selected
                  ),
                  child: Icon(Icons.search),
                )
                    : Icon(Icons.search),
                label: 'Search',
              ),
              BottomNavigationBarItem(
                icon: _selectedIndex == 2
                    ? Container(
                  padding: EdgeInsets.all(10),
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Colors.blue, // Background color when selected
                  ),
                  child: Icon(Icons.settings),
                )
                    : Icon(Icons.settings),
                label: 'Settings',
              ),
            ],
            currentIndex: _selectedIndex,
            selectedItemColor: Colors.red, // Color of the selected icon
            onTap: _onItemTapped,
          ),

制作方法_onItemTapped

 void _onItemTapped(int index) {
        setState(() {
          _selectedIndex = index;
        });
      }