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

只需尝试在bottomBarItem中使用activeIcon:，然后用color放置默认图标。示例：

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

Answer 2

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

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