如何在 Flutter 的底部栏项目图标中添加渐变？

Question

我有一个带有渐变图标的底栏。我已经使用 ShaderMask 来实现渐变，BottomNavBarType 是固定的。我已将颜色 red 和 yellow 分配给渐变图标，但是当我编译代码时，它会向我显示带有 默认绿色/蓝色颜色 的渐变。当我为selectedIconTheme 分配一个值时，渐变是红色黄色叠加层和值的奇怪混合。

我正在尝试在这些图标上实现渐变，这就是栏的样子：

this 是我想要实现的目标 这是底部导航栏的代码：

   bottomNavigationBar: BottomNavigationBar(
        iconSize: 30,
        type: BottomNavigationBarType.fixed,
        currentIndex: _selectedIndex,
        showUnselectedLabels: true,
        showSelectedLabels: true,
        // selectedIconTheme: IconThemeData(color: Colors.purple),
        onTap: (int index) {
          setState(() {
            _selectedIndex = index;
            _selectedIndex = index;
            _onItemTapped(index);
          });
        },
        items: [
          BottomNavigationBarItem(
            activeIcon: ShaderMask(
              shaderCallback: (Rect bounds) {
                return RadialGradient(
                  center: Alignment.topLeft,
                  radius: 0.5,
                   colors: <Color>[Colors.red, Colors.yellow],
                  tileMode: TileMode.repeated,
                ).createShader(bounds);
              },
              child: Icon(FontAwesomeIcons.home),
            ),
            icon: new Icon(FontAwesomeIcons.home, color: Colors.grey),
            title: new Text('Home'),
          ),
          BottomNavigationBarItem(
            activeIcon: ShaderMask(
              shaderCallback: (Rect bounds) {
                return RadialGradient(
                  center: Alignment.topLeft,
                  radius: 1.0,
                  colors: <Color>[Colors.red, Colors.yellow],
                  tileMode: TileMode.mirror,
                ).createShader(bounds);
              },
              child: Icon(Icons.location_on),
            ),
            icon: Icon(Icons.location_on, color: Colors.grey),
            title: new Text('Nav'),
          ),
          BottomNavigationBarItem(
            activeIcon: ShaderMask(
              shaderCallback: (Rect bounds) {
                return RadialGradient(
                  center: Alignment.topLeft,
                  radius: 1.0,
                  colors: <Color>[Colors.red, Colors.yellow],
                  tileMode: TileMode.mirror,
                ).createShader(bounds);
              },
              child: Icon(Icons.notifications),
            ),
            icon: Icon(Icons.notifications, color: Colors.grey),
            title: Text('Notif'),
          ),
          BottomNavigationBarItem(
            activeIcon: ShaderMask(
              shaderCallback: (Rect bounds) {
                return RadialGradient(
                  center: Alignment.topLeft,
                  radius: 1.0,
                  colors: <Color>[Colors.red, Colors.yellow],
                  tileMode: TileMode.mirror,
                ).createShader(bounds);
              },
              child: Icon(Icons.account_circle),
            ),
            icon: Icon(Icons.account_circle, color: Colors.grey),
            title: Text("Profile"),
          ),
        ],
      ),

编辑：

Answer 1

在ShaderMask 中为FontAwesomeIcons.home 添加白色将解决问题：

     BottomNavigationBarItem(
        activeIcon: ShaderMask(
          shaderCallback: (Rect bounds) {
            return RadialGradient(
              center: Alignment.topLeft,
              radius: 0.5,
               colors: <Color>[Colors.red, Colors.yellow],
              tileMode: TileMode.repeated,
            ).createShader(bounds);
          },
          child: Icon(FontAwesomeIcons.home, ***color: Colors.white***),
        ),
        icon: new Icon(FontAwesomeIcons.home, color: Colors.grey),
        title: new Text('Home'),
      ),

结果：