Flutter 如何在容器内使用半圆，如图中的“颤振”中所示？

我试着在容器内做半圆，就像图片中的那个样。我试了很多次，但都不知道怎么做

现在让我解释一下到目前为止我尝试了什么，以及我是如何得到结果的

我尝试使用custompainter类，但得到的结果如下：

enum CircleAlignment {
  topLeft,
  topRight,
  bottomLeft,
  bottomRight,
}

class QuarterCirclePainter extends CustomPainter {
  final CircleAlignment circleAlignment;
  final Color color;

  const QuarterCirclePainter({this.circleAlignment, this.color});

  @override
  void paint(Canvas canvas, Size size) {
    final radius = math.min(size.height, size.width-80);
    final offset = circleAlignment == CircleAlignment.topLeft
        ? Offset(.0, .0)
        : circleAlignment == CircleAlignment.topRight
        ? Offset(size.width, 5)
        : circleAlignment == CircleAlignment.bottomLeft
        ? Offset(.0, size.height+10)
        : Offset(size.width, size.height);
    canvas.drawCircle(offset, radius, Paint()..color = color);
  }

  @override
  bool shouldRepaint(QuarterCirclePainter oldDelegate) {
    return color == oldDelegate.color &&
        circleAlignment == oldDelegate.circleAlignment;
  }
}

但我得到的结果是这样的：

enum CircleAlignment {
  topLeft,
  topRight,
  bottomLeft,
  bottomRight,
}

class QuarterCirclePainter extends CustomPainter {
  final CircleAlignment circleAlignment;
  final Color color;

  const QuarterCirclePainter({this.circleAlignment, this.color});

  @override
  void paint(Canvas canvas, Size size) {
    final radius = math.min(size.height, size.width-80);
    final offset = circleAlignment == CircleAlignment.topLeft
        ? Offset(.0, .0)
        : circleAlignment == CircleAlignment.topRight
        ? Offset(size.width, 5)
        : circleAlignment == CircleAlignment.bottomLeft
        ? Offset(.0, size.height+10)
        : Offset(size.width, size.height);
    canvas.drawCircle(offset, radius, Paint()..color = color);
  }

  @override
  bool shouldRepaint(QuarterCirclePainter oldDelegate) {
    return color == oldDelegate.color &&
        circleAlignment == oldDelegate.circleAlignment;
  }
}

---

有人知道怎么做吗？

下面是一个文本位于圆圈中心的示例

您可以将文本替换为图像，也可以在您的案例中选择将子对象与图像小部件对齐的位置

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 500,
      height: 250,
      color: Colors.pink,
      child: Align(
        alignment: Alignment.topRight,
        child: Container(
            width: 100,
            height: 100,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.only(bottomLeft: Radius.circular(90)),
                border: Border.all(width: 3, color: Colors.green, style: BorderStyle.solid)),
            child: Align(alignment: Alignment.center, child: Text('asdasd'))),
      ),
    );
  }
}

我已经进行了编辑，现在曲线仅为边界的一侧。如你所料，在左上角

编辑：

右上角不是理想的半曲线，无论多近，我认为你们可以利用半径值，找到你们想要的@M.Yogeshwaran

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return         Container(      
      width: 500,
      height:250,
      color: Colors.pink,
      child: Align(
        alignment: Alignment.topRight,
        child: RotatedBox(
          quarterTurns: 1,
          child: Container(                    
                      width: 115,
                      height: 125,

                      decoration: BoxDecoration(
                        color: Colors.orange,
          borderRadius: BorderRadius.only(bottomLeft:  Radius.circular(60), bottomRight:  Radius.circular(80), topRight:  Radius.circular(60)),
          border: Border.all(width: 3,color: Colors.green,style: BorderStyle.none)
          ),
                      child: Align(
                        alignment: Alignment.center,
                        child: Text('asdasd'))),
        ),
      ),
    );
  }
}

---

在使用之前，请确保您使用的是堆栈小部件

Positioned(
        top: -(displayWidth(context) * 0.085),
        left: -(displayWidth(context) * 0.15),
        child: Container(
          height: displayWidth(context) * 0.5,
          width: displayWidth(context) * 0.5,
          decoration: BoxDecoration(
            color: HexColor('a4d9e9'),
            borderRadius: BorderRadius.all(Radius.circular(
              displayWidth(context) * 0.5
            ))
          ),
        ),
      ),

---

没有，没有图像是不同的，我可以放在中心什么是需要的是，在集装箱角圆汉克斯托尔加我已经尝试了上述代码，但看起来完全一样，我张贴的图像你能看看原来的图像圆，这看起来很尖锐