如何在 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

查看圖像如果要在頂部邊框上添加橢圓形狀：

 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;
  }
}