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

Question

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

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

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?

Answer 1

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);