Skip to content

Instantly share code, notes, and snippets.

@mjohnsullivan
Created November 25, 2019 22:09
Show Gist options
  • Star 23 You must be signed in to star a gist
  • Fork 9 You must be signed in to fork a gist
  • Save mjohnsullivan/117e7fffd283c34c5078a93330504b9f to your computer and use it in GitHub Desktop.
Save mjohnsullivan/117e7fffd283c34c5078a93330504b9f to your computer and use it in GitHub Desktop.
Apply a color gradient to an icon in Flutter
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: RadiantGradientMask(
child: Icon(
Icons.book,
size: 250,
color: Colors.white,
),
),
),
),
);
}
}
class RadiantGradientMask extends StatelessWidget {
RadiantGradientMask({this.child});
final Widget child;
@override
Widget build(BuildContext context) {
return ShaderMask(
shaderCallback: (bounds) => RadialGradient(
center: Alignment.center,
radius: 0.5,
colors: [Colors.blue, Colors.red],
tileMode: TileMode.mirror,
).createShader(bounds),
child: child,
);
}
}
@Bahtiyar-byte
Copy link

Thank you! works perfect

@sirjager
Copy link

Thanks it Worked Smoothly

@rodion-m
Copy link

Thank you!

@KhaledYussef
Copy link

Thank you

@No0b-master
Copy link

whats a tilemode ?

@joaopaulovieira-dev
Copy link

Funcionou perfeitamente!

@Condelab
Copy link

Condelab commented Aug 4, 2022

great

@GayatriDunakhe
Copy link

GayatriDunakhe commented Sep 25, 2022

I use same code but my icon dosen't show gradient on it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment