title: Flutter design Instagram like balloons / tooltip widget
body: <p>in flutter i would like to design this layout as widget</p>
  
  <p><a href="https://i.stack.imgur.com/p4s0x.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/p4s0x.png" alt="enter image description here"></a></p>
  
  <p>and current implemented code has this result:</p>
  
  <p><a href="https://i.stack.imgur.com/DVRuQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DVRuQ.png" alt="enter image description here"></a></p>
  
  <p>could you help me to fix some problem on this desing?</p>
  
  <p>in that height/weight and corners should be customizable and i should can put some widget into that, for example:</p>
  
  <p><a href="https://i.stack.imgur.com/qViXm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qViXm.png" alt="enter image description here"></a></p>
  
  <pre><code>class MessageClipper extends CustomClipper&lt;Path&gt; {
    MessageClipper({this.borderRadius = 15});
    final double borderRadius;
    @override
    Path getClip(Size size) {
      double width = size.width;
      double height = size.height;
      double rheight = height - height / 3;
      double oneThird = width / 3;
  
      final path = Path()
        ..lineTo(0, rheight - borderRadius)
        ..cubicTo(0, rheight - borderRadius, 0, rheight, borderRadius, rheight)
        ..lineTo(oneThird, rheight)
        ..lineTo(width/2-borderRadius, height-borderRadius)
        ..cubicTo(width / 2 - borderRadius, height - borderRadius, width / 2,
            height, width / 2 + borderRadius, height - borderRadius )
        ..lineTo(2 * oneThird, rheight)
        ..lineTo(width-borderRadius, rheight)
        ..cubicTo(width - borderRadius, rheight, width, rheight, width,
            rheight - borderRadius)
        ..lineTo(width, 0)
        ..lineTo(0, 0);
      return path;
    }
  
    @override
    bool shouldReclip(CustomClipper&lt;Path&gt; oldClipper) =&gt; true;
  }
  </code></pre>