时间戳

首页 > 解决方案 > 带有导航栏项的活动状态颤动的圆形背景

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

问题描述

我刚刚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,
                ),
              ),
            ),
              ),
);

标签： flutterdartflutter-bottomnavigation

解决方案

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

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,
            ),
          ),
        ),
      ),

推荐阅读