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

- Kaya Ryuuna

Answer 1

尝试在bottomBarItem中使用activeIcon：并将默认图标与color一起放置。

例子：

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

- Darexad

---

“color”标签现已过时。要更改图标的颜色，请使用以下代码：colorFilter: ColorFilter.mode(Colors.blue, BlendMode.srcIn)。 - L.Goyal

@L.Goyal 每当我使用Blendmode.srcIn时，SVG图标就会变成一个填充的正方形。我该如何解决这个问题？希望你明白我的意思。 - Vishnu E R

@VishnuER 这主要取决于您使用的图标。我使用来自Google / FontAwesome的图标，很少遇到这个问题。这是因为图标的创建方式不同所导致的。 - L.Goyal

@VishnuER 你可以尝试将 'SvgPicture' 小部件包裹在 'Transform.scale(scale: 0.9999, child: child)' 中。 - undefined

Answer 2

如果你想在Flutter应用中使用flutter_svg包给SVG图像添加颜色，你可以轻松地通过使用colorFilter属性来实现。

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

- Sai Kiran Katayath

Answer 3

如果您在应用程序中使用Impeller，由于抗锯齿在Impeller渲染中似乎无效，您可以将SvgPicture小部件包装在Transform.scale(scale: 0.9999, child: child)中。

Transform.scale(
        scale: 0.99,
        child: SvgPicture.asset(
          'svg path',
          colorFilter:
              ColorFilter.mode(Colors.black, BlendMode.srcIn),
        ),
      ),

参考资料

- M Karimi