flutterdartflutter-layouticons

How to add gradient on icons


I trying to achive this type of gradient on icons but unable to do that...

Output image

img

I already use this code for that but it also dosen't show any effect

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,),),

What should I do for achiving that?


Solution

  • It is missing blendMode: BlendMode.srcIn. Play with stops and 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,
      ),
    ),
    

    enter image description here