flutter - Flutter - 如何创建自定义形状

Question

下面的图像是我想要使用带有 LinearGradient 的 CustomPainter 绘制并有阴影的图像

我已经画了波纹管形状但不一样并且有LinearGradient

class CurvePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Rect rect = new Rect.fromCircle(
      center: new Offset(165.0, 55.0),
      radius: 180.0,
    );

    final Gradient gradient = new LinearGradient(
      colors: <Color>[
        const Color(0xFF2151a6),
        const Color(0xFF3377f4),
      ],
    );

    var paint = Paint()..shader = gradient.createShader(rect);
    paint.color = Colors.green[800];
    paint.style = PaintingStyle.fill; // Change this to fill

    var path = Path();

    path.moveTo(0, size.height * 0.35);
    path.moveTo(0, size.height * 0.3);

    path.quadraticBezierTo(
        size.width / 2, size.height / 2.4, size.width, size.height * 0.35);
    path.lineTo(size.width, 0);
    path.lineTo(0, 0);

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

标签： flutter

Answer 1

我觉得我画的不错

尝试这个：

class CurvePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Rect rect = new Rect.fromCircle(
      center: new Offset(165.0, 55.0),
      radius: 180.0,
    );

    final Gradient gradient = new LinearGradient(
      colors: <Color>[
        const Color(0xFF2151a6),
        const Color(0xFF3377f4),
      ],
    );

    var paint = Paint()..shader = gradient.createShader(rect);
    paint.color = Colors.green[800];
    paint.style = PaintingStyle.fill; // Change this to fill

    var path = Path();
    path.moveTo(0, size.height * 0.32);
    path.lineTo(size.width * 0.20, size.height *  0.34);
    path.quadraticBezierTo( size.width * 0.30, size.height * 0.35,
        size.width * 0.40, size.height *  0.34 );
    path.lineTo(size.width*0.9, size.height * 0.26);
    path.quadraticBezierTo( size.width, size.height * 0.24,
        size.width , size.height *  0.20);
    path.lineTo(size.width, 0);
    path.lineTo(0 , 0);

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}