（颤动）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

这并不完美，但您可以 fiddle 使用更多数字：

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

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

Answer 2

你可以这样做

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

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

result

（颤动）CustomPaint 小部件的弯曲边缘

(Flutter) Curved edge to a CustomPaint Widget

android

flutter

dart

custom-painting