flutter - 如何在Flutter中创建自定义图表

Question

我正在尝试创建具有圆形边框的图表

我想创建这样的自定义/
我要怎么做，是否有任何套件可以修改它并使它像这样

Answer 1

如果要创建图表，可以使用syncfusion_flutter_charts
如果要创建曲线，则可以使用CustomPaint小部件。我在代码中为您找到了一个示例:

CustomPaint(
   painter: CurveBackground(color: \\ yourColor),
   child: \\ your child
)


class CurveBackground extends CustomPainter {
  final Color color;

  CurveBackground({this.color});

  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint();
    paint.color = color;
    paint.style = PaintingStyle.fill;

    var path = Path();

    path.moveTo(0, Dimens.size_30());
    path.quadraticBezierTo(size.width * 0.4, size.height * 0.1,
        size.width * 0.3, size.height * 0.3);
    path.quadraticBezierTo(size.width * 0.1, size.height * 0.6,
        size.width * 0.45, size.height * 0.7);
    path.quadraticBezierTo(
        size.width * 1, size.height * 0.9, size.width * 0.9, size.height * 1.0);
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}