CODEWITHSUNDEEP
fluttershadergradientlinear-gradients
Khalil Khalil
Khalil Khalil

Reputation: 117

How to do a Gradient effect from topLeft to botttomRgiht in Flutter Shader?

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?

enter image description here

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 🤷‍♂️.

Upvotes: 4

Views: 7159

Answers (2)

Viren V Varasadiya
Viren V Varasadiya

Reputation: 27147

You can use begin and end properties of LinearGradient.

Ex:

  LinearGradient(
     begin: Alignment.topLeft,
     end: Alignment.bottomRight,
     colors: <Color>[
     Color(0xff002fff),
     Color(0xff00f4ff),
     ],
 ),

Upvotes: 10

Sagar Acharya
Sagar Acharya

Reputation: 3767

 @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

Upvotes: 3

Related Questions