Flutter - 更改 SVG 图标颜色

Question

我有一个 Flutter 应用程序，它有一个BottomNavigationBar，它的图标是用 svg 制作的。从该栏中选择图标时，只有文本颜色会改变，svg 图标保持相同的颜色。

bottomNavigationBar: BottomNavigationBar(
        selectedItemColor: widget._colors.orange,
        unselectedItemColor: widget._colors.grey,
        items: _iconNavBar,
        currentIndex: _index,
        type: BottomNavigationBarType.fixed,
        onTap: onTap,
      ),

BottomNavigationBarItem()正在做的示例

BottomNavigationBarItem(
    icon: SvgPicture.asset(
      'svgs/home.svg',
    ),
    label: 'Home')

Answer 1

只需尝试使用activeIcon:inbottomBarItem并在那里放置您的默认图标即可color。例子：

BottomNavigationBarItem(
              label: 'label',
              icon: SvgPicture.asset(
                  iconPath,
              ),
              activeIcon: SvgPicture.asset(
                  iconPath,
                  color: Colors.blue,
              ),
            ),

Answer 2

如果您想使用 flutter_svg 包向 Flutter 应用程序中的 SVG 图像添加颜色，则可以使用colorFilter属性轻松实现此目的。

SvgPicture.asset(
'path to svg eg: assets/icons/svg/wrong_option.svg',
colorFilter: ColorFilter.mode(Colors.red, BlendMode.srcIn),   
);