在Flutter中用矩形绘制贝塞尔曲线

Question

I'm starting with Flutter and have to design a UI that looks like

But with icon button at the center of the Bezier curve.

What I tried is

class HeaderPainter extends CustomPainter {
  HeaderPainter({
    @required this.color,
    @required this.avatarRadius
  });

  final Color color;
  final double avatarRadius;

  @override
  void paint(Canvas canvas, Size size) {
    final shapeBounds = Rect.fromLTRB(0, 0, size.width, size.height - avatarRadius);
    final centerAvatar = Offset(shapeBounds.center.dx, shapeBounds.bottom);
    final avatarBounds = Rect.fromCircle(center: centerAvatar, radius: avatarRadius).inflate(3);
    _drawBackground(canvas, shapeBounds, avatarBounds);
  }

  @override
  bool shouldRepaint(HeaderPainter oldDelegate) {
    return color != oldDelegate.color;
  }

  void _drawBackground(Canvas canvas, Rect shapeBounds, Rect avatarBounds) {
    final paint = Paint()..color = color;

    final backgroundPath = Path()
      ..moveTo(shapeBounds.left, shapeBounds.top)
      ..lineTo(shapeBounds.bottomLeft.dx, shapeBounds.bottomLeft.dy)
      ..arcTo(avatarBounds, -pi, pi, false)
      ..lineTo(shapeBounds.bottomRight.dx, shapeBounds.bottomRight.dy)
      ..lineTo(shapeBounds.topRight.dx, shapeBounds.topRight.dy)
      ..lineTo(0.0, shapeBounds.height - 100)
      ..quadraticBezierTo(
          shapeBounds.width / 4, shapeBounds.height,
          shapeBounds.width / 2, shapeBounds.height
      )
      ..quadraticBezierTo(
          shapeBounds.width - shapeBounds.width / 4, shapeBounds.height,
          shapeBounds.width, shapeBounds.height - 100
      )
      ..lineTo(shapeBounds.width, 0.0)
      ..close();

    canvas.drawPath(backgroundPath, paint);
  }
}

And the outcome is

How can I get the bezier curve with the rectangle?

Edit 2: The HeaderPainter is used like

@override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Container(
          child: CustomPaint(
            size: Size.fromHeight(400.0),
            painter: HeaderPainter(
              color: Colors.red,
              avatarRadius: avatarRadius
            ),
          ),
        ),
        Positioned(
          left: 0,
          right: 0,
          bottom: titleBottomMargin,
          child: Column(
            children: <Widget>[
              Text('Hello World', style: TextStyle(fontWeight: FontWeight.bold),),
            ],
          ),
        ),
        Align(
          alignment: Alignment.bottomCenter,
          child: CircleAvatar(
            radius: avatarRadius,
            backgroundColor: Colors.green,
            child: IconButton(icon: Icon(Icons.message), onPressed: _onAddMessageButtonClick,),
          ),
        )
      ],
    );
  }

Answer 1

Got it solved using ClipPath and CustomClipper .

The updated build() method is

@override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Container(
          child: ClipPath(
            clipper: HeaderClipper(avatarRadius: avatarRadius),
            child: CustomPaint(
              size: Size.fromHeight(400.0),
              painter: HeaderPainter(
                color: Colors.green,
                avatarRadius: avatarRadius
              ),
            ),
          ),
        ),
        ...

and HeaderClipper

class HeaderClipper extends CustomClipper<Path> {
  HeaderClipper({
    @required this.avatarRadius
  });

  final avatarRadius;

  @override
  getClip(Size size) {
    final path = Path()
      ..lineTo(0.0, size.height - 100)
      ..quadraticBezierTo(
          size.width / 4, (size.height - avatarRadius),
          size.width / 2, (size.height - avatarRadius)
      )
      ..quadraticBezierTo(
          size.width - (size.width / 4), (size.height - avatarRadius),
          size.width, size.height - 100
      )
      ..lineTo(size.width, 0.0)
      ..close();

    return path;
  }

  @override
  bool shouldReclip(CustomClipper oldClipper) {
    return false;
  }
}

The final output is