Как сделать CustomPaint таким образом во флаттере

Question

Я знаю, что это не лучший способ, но я действительно не могу этого сделать. Как сделать что-то подобное. Я отстой в геометрии. Я пытаюсь сделать это с помощью cubicTo, но не получаю такого эффекта: /.

Может кто мне поможет. Ниже приведена часть моего кода.

var sw = size.width;
var sh = size.height;

var path = Path();

path.cubicTo(sw/2, 0, sw/4, 0, 2*sw/4, 2*sh/4);
path.cubicTo(2*sw/3, 2*sh/3, sw/3, 0, sw, 0);
path.cubicTo(0, 0, 0, 0, sw, 0);
path.lineTo(sw, sh);
path.lineTo(0, sh);
path.close();

Answer 1

Проверьте это ...

class Paintter extends CustomPainter{
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()..color = Colors.orange;
    var path = Path();
    double factor = 100;
    path.lineTo(0, size.height);
    path.lineTo(size.width, size.height);
    path.lineTo(size.width, 0);
    path.lineTo(size.width - factor, 0);
    path.quadraticBezierTo(size.width/2, size.height, factor, 0);
    path.lineTo(0, 0);
    canvas.drawPath(path, paint);
  }

Результат:

Answer 2

Path@arcToPoint используется для рисования сегментов круга / овала.

Например, для круга с радиусом, равным половине высоты прямоугольника:

final w = size.width;
final h = size.height;
final r = h / 2;

final path = Path();
path.moveTo(0, 0);
path.lineTo(w / 2 - r, 0);
path.arcToPoint(
  Offset(w / 2 + r, 0),
  radius: Radius.circular(r),
  clockwise: false,
);
path.lineTo(w, 0);
path.lineTo(w, h);
path.lineTo(0, h);
path.close();