CODEWITHSUNDEEP
flutterdartflutter-layouticons
Gayatri Dyunakhe
Gayatri Dyunakhe

Reputation: 55

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?

Upvotes: 3

Views: 5883

Answers (2)

Vivek
Vivek

Reputation: 5223

enter image description here

final List<Color> gradientColors = [
  Colors.blue,
  Colors.purple,
  Colors.orange
];


ShaderMask(
  blendMode: BlendMode.srcIn,
  shaderCallback: (Rect bounds) => LinearGradient(
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
    colors: gradientColors, // Gradient colors for the icon
  ).createShader(bounds),
  child: Icon(
    Icons.message,
  ),
);

Upvotes: 1

Md. Yeasin Sheikh
Md. Yeasin Sheikh

Reputation: 63799

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

Upvotes: 13

Related Questions