Chat Bubble In Flutter

In Today’s time everyone is using conversation chatting application, and modern chat application uses Chat Bubble to make them more representative.

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.

chat_bubbles: ^1.1.0

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.

Scaffold(
      appBar: AppBar(
        title: const Text("Bubble Chat"),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.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
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );

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: const Text("Bubble Chat"),

body: SingleChildScrollView(

child: Padding(

padding: const EdgeInsets.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.

Scaffold(
      appBar: AppBar(
        title: const Text("Bubble Chat"),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
            child: Column(
              children: [
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: BubbleNormalAudio(
                    color: const Color(0xFFE8E8EE),
                    duration: 5,
                    position: 3,
                    isPlaying: true,
                    isLoading: false,
                    isPause: true,
                    onPlayPauseButtonClick: () {},
                    onSeekChanged: (value) {},
                    sent: true,
                    seen: true,
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: DateChip(
                    date: DateTime(now.year, now.month, now.day - 2),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: DateChip(
                    date: DateTime(now.year, now.month, now.day - 1),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: DateChip(
                    date: now,
                  ),
                ),
              ],
            ),
            //child:,
          ),
        ),
      ),
    );

Scaffold(

appBar: AppBar(

title: const Text("Bubble Chat"),

body: SingleChildScrollView(

child: Padding(

padding: const EdgeInsets.all(8.0),

child: Container(

child: Column(

children: [

Padding(

padding: const EdgeInsets.all(8.0),

child: BubbleNormalAudio(

color: const Color(0xFFE8E8EE),

duration: 5,

position: 3,

isPlaying: true,

isLoading: false,

isPause: true,

onPlayPauseButtonClick: () {},

onSeekChanged: (value) {},

sent: true,

seen: true,

Padding(

padding: const EdgeInsets.all(8.0),

child: DateChip(

date: DateTime(now.year, now.month, now.day - 2),

Padding(

padding: const EdgeInsets.all(8.0),

child: DateChip(

date: DateTime(now.year, now.month, now.day - 1),

Padding(

padding: const EdgeInsets.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.

For more interesting blogs check out here – https://mobikul.com/blog/

Thanks for reading!!.

Reference

https://pub.dev/packages/chat_bubbles

chat_bubbles

Ayush Agrawal 21 January 2022

. . .

Chat Bubble In Flutter

Conclusion

Reference

Leave a Comment Cancel Reply

Message Sent!