flutter - 通过 (path.quadraticBezierTo) Flutter 从顶部为容器制作半圆

Question

我正在尝试制作如下图所示的形状...

我不知道如何让它像图片一样......

我的代码...

ClipPath(
    clipper: MyClipper(),
    child: Container(
    margin: EdgeInsets.only(top: size.height * 0.6),
    height: 500,
    width: size.width,
    color: Colors.white,
    ),
),

第一次尝试我在 (0,1) 上做出了第一个点...

class MyClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();

    path.moveTo(0, size.height);

    path.lineTo(0, size.height * 0.2);
//    path.lineTo(size.width, size.height);
//    path.lineTo(size.width, size.height * 0.5);

    path.quadraticBezierTo(size.width / 2, 0, size.width, size.height * 0.2);

    path.lineTo(size.width, size.height);

    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true;
  }
}

第二次尝试，我在 (0,0.5) 上提出了第一个点...

class MyClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();

    path.moveTo(0, size.height * 0.5);

    path.quadraticBezierTo(size.width / 2, 0, size.width, size.height * 0.5);
    
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);

    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return false;
  }
}

我知道从底部做它，但我不知道如何做

请我需要答案的解释。

Answer 1

解决方案是当我删除margin时效果很好。

我使用margin的原因是因为我希望我的Container位于屏幕底部，我通过回复了margin定位:bottom: 0 位于Stack

内

Stack(
 children: <Widget>[
   Positioned(
     bottom: 0,
     child: ClipPath(
     clipper: MyClipper(),
     child: Container(
//       margin: EdgeInsets.only(top: size.height * 0.5),
         height: size.height * 0.45,
         width: size.width,
         color: Colors.white,
         ),
      ),
   ),
 ]
),