如何在图标上添加渐变

Question

我试图在图标上实现这种类型的渐变，但无法做到这一点......

输出图像

我已经使用了这个代码，但它也没有显示任何效果

ShaderMask(
  shaderCallback: (Rect bounds) => RadialGradient(
     center: Alignment.center,
     radius: 0.5,
     colors: [
       Colors.pink,
       Colors.deepOrange,
     ],
     tileMode: TileMode.mirror,
  ).createShader(bounds),
  child: Icon(Icons.access_time,),),

为了实现这个目标我应该做什么？

Answer 1

不见了

blendMode: BlendMode.srcIn

。玩

stops

和

colors

ShaderMask(
  blendMode: BlendMode.srcIn,
  shaderCallback: (Rect bounds) => RadialGradient(
    center: Alignment.topCenter,
    stops: [.5, 1],
    colors: [
      Colors.pink,
      Colors.yellow,
    ],
  ).createShader(bounds),
  child: Icon(
    Icons.access_time,
    size: 133,
  ),
),

Answer 2

您可以使用 gradient_icon 包在图标上实现渐变。以下是使用

Icons.star

图标的示例：

GradientIcon(
  icon: Icons.star,
  gradient: LinearGradient(
    colors: [Colors.red, Colors.blue],
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
  ),
  size: 30,
),