Flutter - ClipPath

Question

How to create the above custom clipPath widget? (I attached the screenshot)

I tried but it's not exact output

Clipper class

class MessageClipper extends CustomClipper<Path> {
  final double borderRadius = 15;
  @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<Path> oldClipper) => true;
}

I called this method here

Center(
        child: ClipPath(
        clipper: MessageClipper(),
    child: Container(
      height: 41.66,
      width: 91.63,
    decoration: BoxDecoration(
    borderRadius: BorderRadius.all(Radius.circular(16.0)),
    color: Colors.red,
    ),
    child:
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        Container(
          width: 7,
          height: 8,
          decoration: BoxDecoration(
              color: Color(0xFFCCCCCC),
              shape: BoxShape.circle),
        ),
        Container(
          width: 7,
          height: 8,
          decoration: BoxDecoration(
              color: Color(0xFFCCCCCC),
              shape: BoxShape.circle),
        ),
        Container(
          width: 7,
          height: 8,
          decoration: BoxDecoration(
              color: Color(0xFFCCCCCC),
              shape: BoxShape.circle),
        ),
        Container(
          width: 25,
          height: 24,
          decoration: BoxDecoration(
              color: Color(0xFF1287BA),
              shape: BoxShape.circle),
          child: Center(
            child: Text(
              "17",
              style: TextStyle(color: Color(0xFFFFFFFF)),
            ),
          ),
        ),
      ],

    ),
    ),)
    )

unable to Center items inside Container like this,

Answer 1

with this simple custom ShapeBorder:

class MessageBorder extends ShapeBorder {
  final bool usePadding;

  MessageBorder({this.usePadding = true});

  @override
  EdgeInsetsGeometry get dimensions => EdgeInsets.only(bottom: usePadding? 20 : 0);

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

  @override
  Path getOuterPath(Rect rect, {TextDirection textDirection}) {
    rect = Rect.fromPoints(rect.topLeft, rect.bottomRight - Offset(0, 20));
    return Path()
      ..addRRect(RRect.fromRectAndRadius(rect, Radius.circular(rect.height / 2)))
      ..moveTo(rect.bottomCenter.dx - 10, rect.bottomCenter.dy)
      ..relativeLineTo(10, 20)
      ..relativeLineTo(20, -20)
      ..close();
  }

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

  @override
  ShapeBorder scale(double t) => this;
}

and that usage code:

Container(
  height: 64,
  decoration: ShapeDecoration(
    color: Colors.white,
    shape: MessageBorder(),
    shadows: [
      BoxShadow(color: Colors.black, blurRadius: 4.0, offset: Offset(2, 2)),
    ],
  ),
  alignment: Alignment.centerRight,
  padding: EdgeInsets.only(right: 8),
  child: Container(
    width: 30,
    decoration: BoxDecoration(
      color: Colors.blueAccent,
      shape: BoxShape.circle,
    ),
  ),
),

you can have the result like this:

EDIT: if you want your Widget to be clickable then use something like this:

class ButtonMessage extends StatelessWidget {
  final String text;
  final GestureTapCallback onTap;

  const ButtonMessage(this.text, this.onTap);

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.white,
      elevation: 4,
      clipBehavior: Clip.antiAlias,
      shape: MessageBorder(),
      child: InkWell(
        splashColor: Colors.orange,
        hoverColor: Colors.blueGrey,
        highlightColor: Colors.transparent,
        onTap: onTap,
        child: Container(
          height: 64,
          padding: EdgeInsets.only(bottom: 20, right: 8),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              Container(
                width: 7,
                height: 8,
                decoration: BoxDecoration(color: Color(0xFFCCCCCC), shape: BoxShape.circle),
              ),
              Container(width: 3,),
              Container(
                width: 7,
                height: 8,
                decoration: BoxDecoration(color: Color(0xFFCCCCCC), shape: BoxShape.circle),
              ),
              Container(width: 3,),
              Container(
                width: 7,
                height: 8,
                decoration: BoxDecoration(color: Color(0xFFCCCCCC), shape: BoxShape.circle),
              ),
              Container(width: 6,),
              Container(
                width: 25,
                height: 24,
                decoration: BoxDecoration(color: Color(0xFF1287BA), shape: BoxShape.circle),
                child: Center(
                  child: Text(text, style: TextStyle(color: Color(0xFFFFFFFF))),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

EDIT2: clickable baloon with a custom shadows:

class ButtonMessage extends StatelessWidget {
  final String text;
  final GestureTapCallback onTap;

  const ButtonMessage(this.text, this.onTap);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: ShapeDecoration(
        shape: MessageBorder(usePadding: false),
        shadows: [
          BoxShadow(color: Colors.black, blurRadius: 4, offset: Offset(2, 2)),
        ],
      ),
      child: Material(
        color: Colors.white,
        clipBehavior: Clip.antiAlias,
        shape: MessageBorder(),
        child: InkWell(
          splashColor: Colors.orange,
          hoverColor: Colors.blueGrey,
          highlightColor: Colors.transparent,
          onTap: onTap,
          child: Container(
            height: 64,
            padding: EdgeInsets.only(bottom: 20, right: 8),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                Container(
                  width: 7,
                  height: 8,
                  decoration: BoxDecoration(color: Color(0xFFCCCCCC), shape: BoxShape.circle),
                ),
                Container(width: 3,),
                Container(
                  width: 7,
                  height: 8,
                  decoration: BoxDecoration(color: Color(0xFFCCCCCC), shape: BoxShape.circle),
                ),
                Container(width: 3,),
                Container(
                  width: 7,
                  height: 8,
                  decoration: BoxDecoration(color: Color(0xFFCCCCCC), shape: BoxShape.circle),
                ),
                Container(width: 6,),
                Container(
                  width: 25,
                  height: 24,
                  decoration: BoxDecoration(color: Color(0xFF1287BA), shape: BoxShape.circle),
                  child: Center(
                    child: Text(text, style: TextStyle(color: Color(0xFFFFFFFF))),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}