CODEWITHSUNDEEP
fluttertextgradientlinear-gradients
Khalil Khalil
Khalil Khalil

Reputation: 117

How do LinearGradient on text in flutter from topLeft to bottomRight?

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 this image example?

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: gradientColors,
).createShader(
  Rect.fromCircle(
    center: Offset(fontSize, -200),
    radius: fontSize / 3,
  ),
);

Could anybody have a ideea, how can this be created? Or it's not impossible right now in Flutter 🤷‍♂️

Upvotes: 0

Views: 4803

Answers (2)

Arshneet Kathuria
Arshneet Kathuria

Reputation: 671

Container(decoration: BoxDecoration(                                       
        gradient: LinearGradient(
           begin:Alignment.topLeft,
           end:Alignment.bottomRight,
             colors: [Colors.blue[800],
                 Colors.blue[200]
        ]),
    ),
)

Upvotes: 0

J. S.
J. S.

Reputation: 9625

Have you tried using the begin and end properties of LinearGradient?

final Shader linearGradient = LinearGradient(
  begin: Alignment.topLeft,
  end: Alignment.bottomRight,
  colors: gradientColors,
).createShader(
  Rect.fromCircle(
    center: Offset(fontSize, -200), 
    radius: fontSize / 3,
  )
);

Upvotes: 3

Related Questions