CODEWITHSUNDEEP
flutter
gegobyte
gegobyte

Reputation: 5565

How to add gradient to a shape drawn with Custom Painter?

I am trying to build a design found on Dribbble which looks like this:

enter image description here

What I have been able to make till now looks like:

enter image description here

I have made this design in Flutter using the below code:

Path rectPathThree = Path();
rectPathThree.lineTo(size.width, 0.0);
rectPathThree.lineTo(size.width * 0.6, size.height);
rectPathThree.lineTo(size.width * 0.8, size.height);
rectPathThree.lineTo(size.width, size.height * 0.5);
rectPathThree.lineTo(size.width, 0.0);
rectPathThree.close();

This isn't the complete code but just part of it, the rest of the design is also made in the same way using lineTo

To draw it to canvas:

paint.color = lightColorTwo;
canvas.drawPath(rectPathThree, paint);

The original design contains a bit white on top and then starts merging towards the base color at the bottom. How to add such gradient?

Upvotes: 3

Views: 4502

Answers (1)

J. S.
J. S.

Reputation: 9635

Instead of defining a color, define a shader. It will give you the gradient you are looking for:

var rect = Offset.zero & size;
Path rectPathThree = Path();
Paint paint = Paint();
paint.shader = LinearGradient(
  begin: Alignment.topRight,
  end: Alignment.bottomLeft,
  colors: [
    Colors.blue[900],
    Colors.blue[500],
  ],
).createShader(rect);

Upvotes: 11

Related Questions