is there anyway to make this cool chat bubble widget?

Question

i'd try thinking how to make this chat bubble widget but can't find any way, i'd tried to check on this package flutter_chat_bubble but nothing similar to the design i want to achieve, if you know something please tell me.

i really don't have anything in mind right now to make this widget

Answer 1

Use this code:

Column(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            CustomPaint(
              painter: Bubble(),
              child: Container(
                padding: const EdgeInsets.symmetric(vertical:8,horizontal:15 ),
                constraints: BoxConstraints(
                  maxWidth: MediaQuery.of(context).size.width * .7,
                ),
                child:   const Padding(
                  padding:EdgeInsets.symmetric(vertical: 10, horizontal: 0),
                  child: Text(
                    'your text',
                  ),
                ),
              ),
            ),
            Container(
              margin:  const EdgeInsets.only(top: 10),
                padding: const EdgeInsets.symmetric(horizontal: 15,vertical: 5),
                decoration: const BoxDecoration(
                  color: Colors.grey,
                  shape: BoxShape.circle
                ),
                child: const Icon(Icons.image,size: 30,color: Colors.white,))
          ],
        ),

And Bubble widgetis:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:koja/theme/theme.dart';

class Bubble extends CustomPainter {
  double _radius = 5.0;
  double _x = 10.0;

  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawRRect(
        RRect.fromLTRBAndCorners(
          0,
          0,
          size.width - _x,
          size.height-10,
          bottomLeft: Radius.circular(_radius),
          bottomRight: Radius.circular(_radius),
          topRight: Radius.circular(_radius),
          topLeft: Radius.circular(_radius),
        ),
        Paint()
          ..color = Colors.grey
          ..style = PaintingStyle.fill);
    var path = Path();
    path.moveTo(20,size.height-12);
    path.lineTo(30,size.height);
    path.lineTo(40,size.height-10);
    canvas.clipPath(path);
    canvas.drawRRect(
        RRect.fromLTRBAndCorners(
          0,
          0.0,
          size.width,
          size.height,
        ),
        Paint()
          ..color = Colors.grey
          ..style = PaintingStyle.fill);
  }
  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

Answer 2

try this code with custom clipper

return SafeArea(
      child: Scaffold(
        body: SizedBox(
          height: 200,
          child: Stack(
            children: [
              Container(
                margin: EdgeInsets.only(bottom: 20),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(8),
                  color: Colors.red,
                ),
                width: MediaQuery.of(context).size.width,
                height: 200,
                child: Center(child: Text("Hello")),
              ),
              Align(
                alignment: Alignment.bottomLeft,
                child: Padding(
                  padding: const EdgeInsets.only(left: 50.0),
                  child: ClipPath(
                    clipper: TringleShape(),
                    child: Container(
                      decoration: BoxDecoration(
                        color: Colors.red,
                      ),
                      width: 20,
                      height: 20,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );

here is custom pathClipper

class TringleShape extends CustomClipper<Path> {

  TringleShape();

  @override
  Path getClip(Size size) {
    double width = size.width;
    double height = size.height;
    final path = Path();
    path.moveTo(width, 0);
    path.lineTo(width/2, height);
    path.lineTo(0, 0);
    path.lineTo(width, 0);
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    return true;
  }
}