flutterdart

is there anyway to make this cool chat bubble widget?


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

enter image description here


Solution

  • 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;
      }
    }