WhatsApp’s chat bubble for your Flutter app


Is it that challenging to achieve WhatsApp’s chat bubble shape in a Flutter app?
This article will help you to do it easily.

After working on some Flutter chat app projects I realized that chat bubbles plugin is a must for developers. Hence, I started working on this three weeks ago and I published the chat_bubbles Flutter plugin, which you can find it here and follow the steps below to use the chat_bubbles widgets.

Getting Started

Add this to your package’s pubspec.yaml file:

1
2
dependencies:
chat_bubbles: ^0.7.1+6

Usage

Then you just have to import the package with

1
import ‘package:chat_bubbles/chat_bubbles.dart

Now you can use this plugin to implement various types of Chat Bubbles.

Example

for WhatsApp’s shape chat bubble

Sample Chat Bubble
1
2
3
4
5
6
7
8
9
BubbleSpecialOne(
text: 'Hi , How are you? ',
isSender: false,
color: Color(0xAF52FF8C),
),
BubbleSpecialOne(
text: 'Hi 😊 , fine and ow are you?',
color: Color(0xAF6AD0F5),
),

for all the shapes of chat bubbles

All Chat Bubble Shapes
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
import 'package:flutter/material.dart';
import 'package:chat_bubbles/chat_bubbles.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'chat bubble example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'chat bubble example'),
);
}
}

class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);

final String title;

@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
BubbleNormal(
text: 'bubble normal with tail',
isSender: false,
color: Color(0xAF52FF8C),
tail: true,
),
BubbleNormal(
text: 'bubble normal with tail',
isSender: true,
color: Color(0xAF6AD0F5),
tail: true,
),
BubbleNormal(
text: 'bubble normal without tail',
isSender: false,
color: Color(0xAF52FF8C),
tail: false,
),
BubbleNormal(
text: 'bubble normal without tail',
color: Color(0xAF6AD0F5),
tail: false,
),
BubbleSpecialOne(
text: 'bubble special one with tail',
isSender: false,
color: Color(0xAF52FF8C),
),
BubbleSpecialOne(
text: 'bubble special one without tail',
color: Color(0xAF6AD0F5),
),
BubbleSpecialOne(
text: 'bubble special one with tail',
isSender: false,
tail: false,
color: Color(0xAF52FF8C),
),
BubbleSpecialOne(
text: 'bubble special one without tail',
tail: false,
color: Color(0xAF6AD0F5),
),
BubbleSpecialTwo(
text: 'bubble special tow with tail',
isSender: false,
color: Color(0xAF52FF8C),
),
BubbleSpecialTwo(
text: 'bubble special tow with tail',
isSender: true,
color: Color(0xAF6AD0F5),
),
BubbleSpecialTwo(
text: 'bubble special tow without tail',
isSender: false,
tail: false,
color: Color(0xAF52FF8C),
),
BubbleSpecialTwo(
text: 'bubble special tow without tail',
tail: false,
color: Color(0xAF6AD0F5),
),
],
),
),
),
);
}
}

Thanks for reading this article! Leave a comment below if you have any questions or suggestions.