android - ( flutter )CustomPaint 小部件的弯曲边缘

Question

这就是我想要构建的:

(只看 appBar 的形状而不是内容)

这是我的:

我希望边缘是弯曲的，而不是那么尖锐。

这是我的 CustomPaint 代码:

class LogoPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint();
    paint.color = Colors.blue;
    var path = Path();
    path.lineTo(0, size.height - size.height / 5);
    path.lineTo(size.width / 1.2, size.height);
    path.lineTo(size.width, size.height - size.height / 5);
    path.lineTo(size.width, 0);
    path.close();
    canvas.drawPath(path, paint);
  }

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

如何实现这种弯曲边缘？

我尝试了 point.arcToPoint() 和 point.quadraticBezierTo()，但没有成功。

Answer 1

这并不完美，但您可以稍微调整一下数字:

class LogoPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint();
    paint.color = Colors.blue;
    var path = Path();
    path.lineTo(0, size.height - size.height / 5);
    path.lineTo(size.width / 1.2, size.height);
    //Added this line
    path.relativeQuadraticBezierTo(15, 3, 30, -5);
    path.lineTo(size.width, size.height - size.height / 5);
    path.lineTo(size.width, 0);
    path.close();
    canvas.drawPath(path, paint);
  }

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

这段代码给出了这样的结果: