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