title: Draw Bezier curve with rectangle in Flutter
body: <p>I'm starting with <strong>Flutter</strong> and have to design a UI that looks like</p>
  <p><a href="https://i.stack.imgur.com/lYNY5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lYNY5.png" alt="enter image description here" /></a></p>
  <p>But with icon button at the center of the Bezier curve.</p>
  <p>What I tried is</p>
  <pre><code>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);
    }
  }
  </code></pre>
  <p>And the outcome is</p>
  <p><a href="https://i.stack.imgur.com/8NCwr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8NCwr.png" alt="enter image description here" /></a></p>
  <p><strong>How can I get the bezier curve with the rectangle?</strong></p>
  <blockquote>
  <p>Edit 2: The HeaderPainter is used like</p>
  </blockquote>
  <pre><code>@override
    Widget build(BuildContext context) {
      return Stack(
        children: &lt;Widget&gt;[
          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: &lt;Widget&gt;[
                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,),
            ),
          )
        ],
      );
    }
  </code></pre>