How to do a Gradient effect from topLeft to botttomRgiht in Flutter Shader?
1,947
Solution 1
You can use begin and end properties of LinearGradient.
Ex:
LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: <Color>[
Color(0xff002fff),
Color(0xff00f4ff),
],
),
Solution 2
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Column(
children: <Widget>[
Container(
width: 200,
height: 200,
decoration: new BoxDecoration(
gradient: new LinearGradient(
colors: [Color(0xFF11F4B5), Color(0xFFCA436B)],
begin: FractionalOffset.centerLeft,
end: FractionalOffset.centerRight,
stops: [0.0, 1.0],
tileMode: TileMode.clamp)),
),
SizedBox(
height: 20,
),
Container(
width: 200,
height: 200,
decoration: new BoxDecoration(
gradient: new LinearGradient(
colors: [Color(0xFF1cb5e1), Color(0xFF000046),Color(0xFF000000)],
begin: FractionalOffset.topLeft,
end: FractionalOffset.bottomRight,
stops: [0.0, 1.0],
tileMode: TileMode.mirror)),
),
],
)),
);
}
just check if this works, changing the color will get you the desired output
Author by
Khalil Khalil
Updated on December 16, 2022Comments
-
Khalil Khalil over 1 year
Hy everyone,
I need to know, how do I can create so a Gradient colors from topLeft to bottomRight withhin a shader in flutter like in example
2
in this image?I tried with this mini shader code to do this, but it still doesn't working for me.
final Shader linearGradient = LinearGradient( colors: <Color>[ Color(0xff002fff), Color(0xff00f4ff), ], ).createShader(Rect.fromCircle(center: Offset(200, 0), radius: 150));
Could anybody have a ideea, how can this be created? Or it's not impossible right now in Flutter 🤷♂️.