如何在 Flutter 中编码矩形+椭圆形状

Question

我正在尝试实现所示图像中的形状。我不知道该怎么做。我尝试的最后一件事是：

          Container(
            height: 175,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.vertical(
                bottom: Radius.elliptical(175, 45),
              ),
            ),
          )

如何创建这个形状？

Answer 1

您可以使用自定义画家：

 class MyWidget extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Container(
        color: Colors.transparent,
        height: 155,
        width: 375,
        child: CustomPaint(
          painter: CurvePainter(),
        ),
      ),
    );
  }
}

class CurvePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint();
    paint.color = Color(0XFF382b47);
    paint.style = PaintingStyle.fill; 

    var path = Path();

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

    canvas.drawPath(path, paint);
  }

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

Answer 2

View Image 如果要在顶部边框上添加椭圆形：

 class MyWidget extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Transform(
        alignment: Alignment.center,
        transform: Matrix4.rotationX(math.pi),
        child: Container(
          color: Colors.red,
          height: 120,
          width: double.infinity,
          child: CustomPaint(
            painter: CurvePainter(),
          ),
        ),
     ),;
  }
}

class CurvePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint();
    paint.color = Color(0XFF382b47);
    paint.style = PaintingStyle.fill; 

    var path = Path();

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

    canvas.drawPath(path, paint);
  }

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