flutter - 如何更改 Flutter 底部导航栏中的 SVG 图标？

Question

我试图在点击时更改我的 SVG 图标颜色。我试过 selectedColor 但图标没有改变颜色。所以我尝试使用快捷方式 if...else 语句，但我仍然没有改变颜色。

代码如下:

bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
              icon: SvgPicture.asset('assets/dashboard-outline.svg', width: 25),
              label: 'Dashboard'
          ),
          BottomNavigationBarItem(
            icon: SvgPicture.asset('assets/tank-outline.svg', color: Colors.black54, width: 30),
            label: 'Tanks',
          ),
          BottomNavigationBarItem(
              icon: SvgPicture.asset('assets/activity-outline.svg', width: 18),
              label: 'Activity'
          ),
          BottomNavigationBarItem(
              icon: SvgPicture.asset('assets/account-outline.svg', width: 20),
              label: 'Account'
          ),
        ],
        currentIndex: _index,
        onTap: _onItemTapped,
        selectedItemColor: Color.fromRGBO(0,99,183,1)
      ),

我有一个不同的 SVG 图片图标文件，可以在点击时更改它。

这是我尝试的代码:

bool onSelected = true;

  Widget build(BuildContext context) {
    return Scaffold(
      body: _myPages[_index],

      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
              icon: SvgPicture.asset(onSelected == false ? 'assets/dashboard-outline.svg' : 'assets/dashboard-fill.svg', width: 25),
              label: 'Dashboard'
          ),

如有任何帮助，我们将不胜感激。

Answer 1

您只需更改您的项目并验证此属性以定义正确的颜色:

 SvgPicture.asset(
 'assets/dashboard-outline.svg', 
  width: 25), 
  color: _currentIndex == 0 ? Colors.red : Colors.black,