Flutter 定制畫家圓弧

Question

大家好，實際上我試圖在下面附加的屏幕截圖中實現這個，但我無法在我現在使用的代碼下面得到它。 實際上這是一個底頁，任何人都可以幫助我解決這個問題。

class BNBCustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.white
      ..style = PaintingStyle.fill;

    Path path = Path();
    path.moveTo(0, 0); // Start
    path.quadraticBezierTo(size.width * 0.20, 0, size.width * 0.35, 0);
    path.quadraticBezierTo(size.width * 0.40, 0, size.width * 0.40, 5);
    path.arcToPoint(Offset(size.width * 0.60, 5),
        radius: const Radius.circular(20.0), clockwise: false);
    path.quadraticBezierTo(size.width * 0.60, 0, size.width * 0.65, 0);
    path.quadraticBezierTo(size.width * 0.80, 0, size.width, 0);
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);
    path.lineTo(0, 20);
    // canvas.drawShadow(path, Colors.black, 5, true);
    canvas.drawPath(path, paint);

    /*
    path.moveTo(0, 0); // Start
    path.quadraticBezierTo(size.width * 0.20, 0, size.width * 0.40, 0);
    path.quadraticBezierTo(size.width * 0.45, 0, size.width * 0.45, 5);
    path.arcToPoint(Offset(size.width * 0.55, 5),
        radius: const Radius.circular(20.0), clockwise: false);
    path.quadraticBezierTo(size.width * 0.55, 0, size.width * 0.60, 0);
    path.quadraticBezierTo(size.width * 0.80, 0, size.width, 0);
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);
    path.lineTo(0, 20);
    canvas.drawShadow(path, Colors.black, 5, true);
    canvas.drawPath(path, paint);
    */
  }

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

當前結果->

努力實現->

Answer 1

https://dartpad.dev/?id=433529da396b9a66e330e19f3e77ab9d

dartpad 中的解決方案示例

class ClipperNavbar extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.redAccent
      ..style = PaintingStyle.fill;

    final double sw = size.width;
    final double sh = size.height;

    const double radius = 20;
    const double cradius = 45; // center radius width
    const double ipy = cradius / 3;

    Path path = Path()
      ..moveTo(0, radius)
      ..quadraticBezierTo(0, 0, radius, 0) // radius left
      ..lineTo(sw / 2 - cradius, 0)
      ..quadraticBezierTo(
          sw / 2 - cradius * 0.75, ipy / 3, sw / 2 - cradius * 0.5, ipy)
      ..arcToPoint(
        Offset(sw / 2 + cradius * 0.5, ipy),
        radius: const Radius.circular(cradius),
        clockwise: false,
      )
      ..quadraticBezierTo(
          sw / 2 + cradius * 0.75, ipy / 3, (sw / 2) + cradius, 0)
      ..lineTo(sw - radius, 0)
      ..quadraticBezierTo(sw, 0, sw, radius) // radius right
      ..lineTo(sw, sh)
      ..lineTo(0, sh)
      ..close();

    canvas.drawPath(path, paint);
  }

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