Flutter 如何在颤振中画半圆容器

我必须设计如上图所示的屏幕：

我想在上图中画白色背景部分。我已经尝试使用自定义绘制与剪辑路径，但我无法实现喜欢的图像

这是我的密码：

class CommomContainer extends CustomClipper<Path> {
  CommomContainer({@required this.holeRadius});

  final double holeRadius;

  @override
  Path getClip(Size size) {
    final path = Path()
      ..moveTo(0, 0)
      ..lineTo(size.width / 2 - holeRadius - 10, 0.0)
      ..quadraticBezierTo(
          size.width / 2 - holeRadius, 0.0, size.width / 2 - holeRadius, 10.0)
      ..arcToPoint(
        Offset(size.width / 2 + holeRadius, 0.0),
        clockwise: false,
        radius: Radius.circular(2),
      )
      ..lineTo(size.width, 0.0)
      ..lineTo(size.width, size.height);
    path.lineTo(0.0, size.height);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CommomContainer oldClipper) => true;
}

class CommomContainer扩展了CustomClipper{
CommomContainer（{@required this.holeRadius}）；
最终双孔；
@凌驾
路径getClip（大小）{
最终路径=路径（）
…移动到（0，0）
..线条（尺寸.宽度/2-孔半径-10,0.0）
…方贝塞尔托(
尺寸.宽度/2-孔半径，0.0，尺寸.宽度/2-孔半径，10.0）
…弧点(
偏移量（尺寸宽度/2+孔半径，0.0），
顺时针：假，
半径：半径。圆形（2），
)
..lineTo（尺寸.宽度，0.0）
..lineTo（尺寸、宽度、尺寸、高度）；
path.lineTo（0.0，大小.高度）；
path.close（）；
返回路径；
}
@凌驾
bool shouldReclip（CommomContainer oldcipper）=>true；
}

非常感谢您的帮助。

这里您可以使用，我也使用过。您可以将笔划样式从

PaintingStyle.stroke

更改为

PaintingStyle.fill

以填充所需的颜色

class MyCustomPainter extends CustomPainter{
      
      @override
      void paint(Canvas canvas, Size size) {
        
        

      Paint paint_0 = new Paint()
          ..color = Color.fromARGB(255, 33, 150, 243)
          ..style = PaintingStyle.stroke
          ..strokeWidth = 1;
         
             
        Path path_0 = Path();
        path_0.moveTo(0,0);
        path_0.lineTo(size.width,0);
        path_0.lineTo(size.width,size.height);
        path_0.lineTo(0,size.height);
        path_0.lineTo(0,0);
        path_0.close();

        canvas.drawPath(path_0, paint_0);
      

      Paint paint_1 = new Paint()
          ..color = Color.fromARGB(255, 33, 150, 243)
          ..style = PaintingStyle.stroke
          ..strokeWidth = 1;
         
             
        Path path_1 = Path();
        path_1.moveTo(size.width*0.3071375,size.height*0.3273600);
        path_1.cubicTo(size.width*0.3067750,size.height*0.1999400,size.width*0.3815000,size.height*0.1964000,size.width*0.4125000,size.height*0.2000000);
        path_1.cubicTo(size.width*0.4514375,size.height*0.3614200,size.width*0.5514000,size.height*0.3594200,size.width*0.5875000,size.height*0.2000000);
        path_1.quadraticBezierTo(size.width*0.6656000,size.height*0.1954200,size.width*0.6943500,size.height*0.3273600);
        path_1.quadraticBezierTo(size.width*0.6943500,size.height*0.6060200,size.width*0.6943500,size.height*0.6990200);
        path_1.quadraticBezierTo(size.width*0.6943500,size.height*0.8229400,size.width*0.6169000,size.height*0.8229400);
        path_1.quadraticBezierTo(size.width*0.4427250,size.height*0.8229400,size.width*0.3846250,size.height*0.8229400);
        path_1.quadraticBezierTo(size.width*0.3049125,size.height*0.8229600,size.width*0.3071375,size.height*0.6990200);
        path_1.quadraticBezierTo(size.width*0.3071375,size.height*0.6060200,size.width*0.3071375,size.height*0.3273600);
        path_1.close();

        canvas.drawPath(path_1, paint_1);
      

      Paint paint_2 = new Paint()
          ..color = Color.fromARGB(255, 33, 150, 243)
          ..style = PaintingStyle.stroke
          ..strokeWidth = 1;
         
             
        Path path_2 = Path();
        path_2.moveTo(size.width*0.5000002,size.height*0.0804608);
        path_2.cubicTo(size.width*0.5273750,size.height*0.0804200,size.width*0.5684875,size.height*0.1111200,size.width*0.5684620,size.height*0.1899997);
        path_2.cubicTo(size.width*0.5684875,size.height*0.2338200,size.width*0.5479250,size.height*0.2995600,size.width*0.5000002,size.height*0.2995385);
        path_2.cubicTo(size.width*0.4726125,size.height*0.2995600,size.width*0.4315250,size.height*0.2667000,size.width*0.4315384,size.height*0.1899997);
        path_2.cubicTo(size.width*0.4315250,size.height*0.1462000,size.width*0.4520625,size.height*0.0804200,size.width*0.5000002,size.height*0.0804608);
        path_2.close();

        canvas.drawPath(path_2, paint_2);
      
        
      }

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

---

试试这个，我使用了堆栈，然后在矩形的顶部放了两个同心圆

 Scaffold(
    backgroundColor: Colors.yellow,
    body: Center(
      child: Stack(
        alignment: Alignment.topCenter,
        clipBehavior: Clip.none,
        children: [
          Card(
            color: Colors.white,
            child: Container(
              height: 300,
              width: 300,
            ),
          ),
          Positioned(
            top: -50,
            child: Container(
              height: 100,
              width: 100,
              // color: Colors.yellow,
              decoration: BoxDecoration(
                  shape: BoxShape.circle, color: Colors.yellow),
            ),
          ),
          Positioned(
            top: -40,
            child: Container(
              height: 80,
              width: 80,
              // color: Colors.yellow,
              decoration: BoxDecoration(
                  shape: BoxShape.circle, color: Colors.white),
            ),
          )
        ],
      ),));

---

您可以使用此网站制作形状，它将自动为您生成代码。试试这个