android - 如何在 flutter 中绘制自定义动态高度弯曲形状？

Question

我想在 flutter 中绘制以下自定义形状的类型

直到现在我已经尝试使用CustomPainter

class MyBottomPainter extends CustomPainter {
  final Color color;

  MyBottomPainter(this.color);

  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..color = color ?? Colors.black.withOpacity(0.7)
      ..style = PaintingStyle.fill;

    var rect = Rect.fromCircle(
        center: Offset(size.width * 0.110, size.height * 0.835), radius: 40.0);

    var path = Path()
      ..moveTo(0, size.height * 0.875)
      ..addArc(rect, 0, size.width * 0.100)
      ..quadraticBezierTo(
          0, size.height * 0.875, size.width * 0.100, size.height * 0.675)
      ..quadraticBezierTo(size.width * 0.100, size.height * 0.675,
          size.width - 40.0, size.height * 0.675)
      ..quadraticBezierTo(size.width, size.height * 0.645, size.width,
          size.height * 0.675 - 40.0)
      ..lineTo(size.width, size.height)
      ..lineTo(0, size.height);

    canvas.drawPath(path, paint);
  }

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

我也尝试使用 ShapeBorder

class BottomShapeBorder extends ShapeBorder {
  const BottomShapeBorder();

  @override
  Path getInnerPath(Rect rect, {TextDirection textDirection}) => _getPath(rect);

  @override
  Path getOuterPath(Rect rect, {TextDirection textDirection}) => _getPath(rect);

  _getPath(Rect rect) {
    final r = rect.height / 2;
    final radius = Radius.circular(r);
    final offset = Rect.fromCircle(center: Offset.zero, radius: r);
    return Path()
      ..moveTo(rect.topLeft.dx, rect.topLeft.dy)
      ..relativeArcToPoint(offset.bottomLeft, clockwise: false, radius: radius)
      ..relativeArcToPoint(offset.bottomRight, clockwise: true, radius: radius)
      ..relativeArcToPoint(offset.topRight, clockwise: true, radius: radius)
      ..lineTo(rect.centerRight.dx - r, rect.centerRight.dy)
      ..relativeArcToPoint(offset.topRight, clockwise: false, radius: radius)
      ..addRect(rect);
  }

  @override
  EdgeInsetsGeometry get dimensions {
    return EdgeInsets.all(0);
  }

  @override
  ShapeBorder scale(double t) {
    return BottomShapeBorder();
  }

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) {
  }
}

但是在上述两种方法中我都无法获得预期的输出
有人可以帮助我创建这种类型的自定义形状吗？
如果需要更多信息，请告诉我。提前致谢。您的努力将不胜感激。

Answer 1

您可以使用容器装饰

Container(
    decoration: BoxDecoration(
              color: Color.black,
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(20),
                bottomRight: Radius.circular(20),
              )),
)