Question

我有一个带有渐变图标的底部栏。我已经使用ShaderMask实现了渐变，并且BottomNavBarType是固定的。我已经将颜色红色和黄色分配给了渐变图标，但是当我编译代码时，它显示了具有默认绿色/蓝色的渐变。当我为selectedIconTheme赋值时，渐变是红色黄色和该值的叠加的怪异混合。

我正在尝试在这些图标上实现渐变，这就是条形图：

this是我要达到的目标这是BottomNavBar的代码：

   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

在select d.RawData, json_query(d.RawData, '$.object') as Object from data_tb d;中的FontAwesomeIcons.home中添加白色将解决此问题：

ShaderMask

结果：

如何在Flutter中的BottomBarItem图标中添加渐变？

1 个答案: