flutter - 带有导航栏项的活动状态颤动的圆形背景

Question

我刚刚bottom bar navigation在我的颤振应用程序中实现了一个。但是，我需要做最后一件事。我想添加一个 cicle 背景，以便在活动时与 Asset Icon 一起显示。我不知道该怎么做，因为我需要一些帮助。

现在，我的代码添加了文本和图像，但我需要有关如何使用我的代码添加背景的说明。

  new BottomNavigationBarItem(
            icon: ImageIcon(
              AssetImage(
                "assets/images/home.png",
              ),
              size: 25,
            ),
            title: Text(
              "Home",
              style: TextStyle(
                fontWeight: FontWeight.w700,
                fontFamily: 'Inter',
                fontSize: _sizeConfig.textSize(
                  context,
                  1.7,
                ),
              ),
            ),
              ),
);

Answer 1

一种方法是检查索引并相应地更改容器的颜色。

eg : 这里 index 存储当前屏幕索引

BottomNavigationBarItem(
        icon: Container(
          decoration: BoxDecoration(
              color: index == 0 ? Colors.orange : Colors.transparent,
              shape: BoxShape.circle),
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Icon(Icons.ac_unit),
          ),
        ),
        title: Text(
          "Home",
          style: TextStyle(
            fontWeight: FontWeight.w700,
            fontFamily: 'Inter',
            fontSize: _sizeConfig.textSize(
              context,
              1.7,
            ),
          ),
        ),
      ),

Answer 2

补充 Mr Random 响应，而不是使用状态来选择女巫来放置容器，而是使用 activeIcon 指令。这里有一个小例子。

BottomNavitationBar(
  items: [
  BottomNavitationBarItem(
    icon: Icon(Icons.home_outline)//Icon to be shown if not selected
    label: 'Home',
    activeIcon: Container(
      decoration: BoxDecoration(
        color: Colors.orange,
        shape: BoxShape.circle
      ),
      child: Padding(
        padding: const EdgeInserts.all(8),
        child: Icon(Icons.home)
      )
    ),
  ),
  BottomNavitationBarItem(
    icon: Icon(Icons.settings_outline)//Icon to be shown if not selected
    label: 'Settings',
    activeIcon: Container(
      decoration: BoxDecoration(
        color: Colors.orange,
        shape: BoxShape.circle
      ),
      child: Padding(
        padding: const EdgeInserts.all(8),
        child: Icon(Icons.settings)
      )
    ),
  )
 ]
);