Chat App UI Flutter Tutorial with Example

 

import ‘package:flutter/material.dart’;

class CustomBubbleShape extends CustomPainter {
final Color bgColor;

CustomBubbleShape(this.bgColor);

@override
void paint(Canvas canvas, Size size) {
var paint = Paint()..color = bgColor;

var path = Path();
path.lineTo(-5, 0);
path.lineTo(0, 10);
path.lineTo(5, 0);
canvas.drawPath(path, paint);
}

@override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}

 

 

import ‘package:flutter/material.dart’;
import ‘custom_bubble_shape.dart’;

class CustomSendMessageUI extends StatelessWidget {

final String sendMsgTxt;
const CustomSendMessageUI({
Key key,
@required this.sendMsgTxt,
}) : super(key: key);

@override
Widget build(BuildContext context) {
final sendMsgTxtGroup = Flexible(
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Flexible(
child: Container(
padding: EdgeInsets.all(15),
decoration: BoxDecoration(
color: Colors.deepOrangeAccent,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(18),
bottomLeft: Radius.circular(18),
bottomRight: Radius.circular(18),
),
),
child: Text(
sendMsgTxt,
style: TextStyle(color: Colors.white, fontSize: 16),
),
),
),
CustomPaint(painter: CustomBubbleShape(Colors.deepOrangeAccent)),
],
));

return Padding(
padding: EdgeInsets.only(right: 15, left: 45, top: 15, bottom: 5),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
SizedBox(height: 30),
sendMsgTxtGroup,
],
),
);
}
}

 

 

import ‘package:flutter/material.dart’;
import ‘package:flutterchatbubblesample/custom_bubble_shape.dart’;
import ‘dart:math’ as math;

class CustomReceivedMessageUI extends StatelessWidget {

final String receivedMsgTxt;
const CustomReceivedMessageUI({
Key key,
@required this.receivedMsgTxt,
}) : super(key: key);

@override
Widget build(BuildContext context) {
final receivedMsgTxtGroup = Flexible(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Transform(
alignment: Alignment.center,
transform: Matrix4.rotationY(math.pi),
child: CustomPaint(
painter: CustomBubbleShape(Colors.grey),
),
),
Flexible(
child: Container(
padding: EdgeInsets.all(15),
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.only(
topRight: Radius.circular(18),
bottomLeft: Radius.circular(18),
bottomRight: Radius.circular(18),
),
),
child: Text(
receivedMsgTxt,
style: TextStyle(color: Colors.black, fontSize: 16),
),
),
),
],
));

return Padding(
padding: EdgeInsets.only(right: 45, left: 15, top: 10, bottom: 5),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
SizedBox(height: 30),
receivedMsgTxtGroup,
],
),
);
}
}

 

 

import ‘package:flutter/material.dart’;
import ‘custom_received_message_ui.dart’;
import ‘custom_send_message_ui.dart’;

class MyChatUIScreen extends StatefulWidget {
@override
_MyChatUIScreenState createState() => _MyChatUIScreenState();
}

class _MyChatUIScreenState extends State<MyChatUIScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(‘Flutter Chat Bubble Sample’)),
body: Container(
child: ListView(
children: [
CustomSendMessageUI(sendMsgTxt: “Do you want to book a table?”),
CustomReceivedMessageUI(receivedMsgTxt: “Yes”),
CustomSendMessageUI(sendMsgTxt: “Our continental cusine offer you the best food.”),
CustomReceivedMessageUI(receivedMsgTxt: “Nice”),
CustomSendMessageUI(sendMsgTxt: “Do you want to see our menu?”),
CustomReceivedMessageUI(receivedMsgTxt: “I already checked”),
CustomSendMessageUI(sendMsgTxt: “Okay. Shall we continue with the table reservation?”),
CustomReceivedMessageUI(receivedMsgTxt: “Yes”),
CustomSendMessageUI(sendMsgTxt: “We are open 11:00 am to 10:00 pm from Mon to Sun.”),
CustomReceivedMessageUI(receivedMsgTxt: “That’s good”),
CustomSendMessageUI(sendMsgTxt: “What time would you like to come?”),
],
),
),
);
}
}