Flutter – ClipPath

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))),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}