In this blog, we will explore Chat Bubble in Flutter. We will see how to implement a demo project of chat bubble and how to make it in the simplest way.
There are different types of Chat Bubbles.
BubbleNormal
BubbleSpecialOne
DateChip
BubbleNormalAudio, and many more
There are different properties in each one of them, some are listed below
isSender
delivered
trail
seen
sent
Let’s Start The Steps For Integrating Chat Bubble In Flutter
Step1: Create a flutter project.
Step2: Add the chat_bubbles dependency to pubspec.yaml file.
Step3: Run “flutter pub get” in the root directory of your app.
1
chat_bubbles:^1.1.0
Therefore In order to check the updated version of the dependency click here.
Step4: Now start the coding for the same.
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
Scaffold(
appBar:AppBar(
title:constText("Bubble Chat"),
),
body:SingleChildScrollView(
child:Padding(
padding:constEdgeInsets.all(8.0),
child:Column(
children:const[
Padding(
padding:EdgeInsets.only(bottom:8.0),
child:BubbleSpecialOne(
text:"Hello, How are you",
color:Colors.grey,
isSender:true,
delivered:true,
tail:true,
seen:true,
sent:true,
textStyle:TextStyle(
fontSize:18.0,
color:Colors.black
),
),
),
Padding(
padding:EdgeInsets.only(bottom:8.0),
child:BubbleSpecialOne(
text:"I am fine, you say",
color:Colors.blueAccent,
isSender:false,
delivered:true,
tail:true,
seen:true,
sent:true,
textStyle:TextStyle(
fontSize:18.0,
color:Colors.black
),
),
),
Padding(
padding:EdgeInsets.only(bottom:8.0),
child:BubbleSpecialOne(
text:"I am also good, Hows your job?",
color:Colors.grey,
isSender:true,
delivered:true,
tail:true,
seen:true,
sent:true,
textStyle:TextStyle(
fontSize:18.0,
color:Colors.black
),
),
),
Padding(
padding:EdgeInsets.only(bottom:8.0),
child:BubbleSpecialOne(
text:"Going great",
color:Colors.blueAccent,
isSender:false,
delivered:true,
tail:true,
seen:true,
sent:true,
textStyle:TextStyle(
fontSize:18.0,
color:Colors.black
),
),
),
Padding(
padding:EdgeInsets.only(bottom:8.0),
child:BubbleSpecialOne(
text:"Are you free next weekend?",
color:Colors.grey,
isSender:true,
delivered:true,
tail:true,
seen:true,
sent:true,
textStyle:TextStyle(
fontSize:18.0,
color:Colors.black
),
),
),
Padding(
padding:EdgeInsets.only(bottom:8.0),
child:BubbleSpecialOne(
text:"No sorry little busy",
color:Colors.blueAccent,
isSender:false,
delivered:true,
tail:true,
seen:true,
sent:true,
textStyle:TextStyle(
fontSize:18.0,
color:Colors.black
),
),
),
Padding(
padding:EdgeInsets.only(bottom:8.0),
child:BubbleSpecialOne(
text:"No issues, will catch you next time",
color:Colors.grey,
isSender:true,
delivered:true,
tail:true,
seen:true,
sent:true,
textStyle:TextStyle(
fontSize:18.0,
color:Colors.black
),
),
),
Padding(
padding:EdgeInsets.only(bottom:8.0),
child:BubbleSpecialOne(
text:"Sure sure!!",
color:Colors.blueAccent,
isSender:false,
delivered:true,
tail:true,
seen:true,
sent:true,
textStyle:TextStyle(
fontSize:18.0,
color:Colors.black
),
),
),
],
),
),
),
);
Finally, we can run the code and as a result, we can see the below output.
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
Scaffold(
appBar:AppBar(
title:constText("Bubble Chat"),
),
body:SingleChildScrollView(
child:Padding(
padding:constEdgeInsets.all(8.0),
child:Container(
child:Column(
children:[
Padding(
padding:constEdgeInsets.all(8.0),
child:BubbleNormalAudio(
color:constColor(0xFFE8E8EE),
duration:5,
position:3,
isPlaying:true,
isLoading:false,
isPause:true,
onPlayPauseButtonClick:(){},
onSeekChanged:(value){},
sent:true,
seen:true,
),
),
Padding(
padding:constEdgeInsets.all(8.0),
child:DateChip(
date:DateTime(now.year,now.month,now.day-2),
),
),
Padding(
padding:constEdgeInsets.all(8.0),
child:DateChip(
date:DateTime(now.year,now.month,now.day-1),
),
),
Padding(
padding:constEdgeInsets.all(8.0),
child:DateChip(
date:now,
),
),
],
),
//child:,
),
),
),
);
Finally, we can run the code and as a result, we can see the below output.
Conclusion
Congratulations!! you have learned how to use Chat Bubble in a flutter.
For more detail, you can refer to the official doc of a flutter here.
Be the first to comment.