如何为使用Custom Painter绘制的形状添加渐变？

Question

我正在尝试在Dribbble上构建一个看起来像这样的设计：

到目前为止我所能做的看起来像：

我已经使用以下代码在Flutter中进行了此设计：

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

这不是完整的代码，而只是其中的一部分，其余设计也使用lineTo

以相同的方式进行

要将其绘制到画布上：

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

原始设计的顶部有点白色，然后开始向底部的基色合并。如何添加这样的渐变？

Answer 1

定义着色器，而不是定义颜色。它将为您提供所需的渐变：

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