prahack/chat_bubbles

Flutter chat bubble/speech bubble widgets.

chat_bubbles plugin

Flutter chat bubble widgets, similar to the Whatsapp and more shapes. Audio and Image chat bubble widgets are also included. Easy to use and implement chat bubbles.

Getting Started

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

dependencies:
  chat_bubbles: ^1.6.0

Usage

Then you just have to import the package with

import 'package:chat_bubbles/chat_bubbles.dart'

Now you can use this plugin to implement various types of Chat Bubbles, Audio Chat Bubbles and Date chips.

Examples

iMessage's bubble example

BubbleSpecialThree(
  text: 'Added iMessage shape bubbles',
  color: Color(0xFF1B97F3),
  tail: false,
  textStyle: TextStyle(
      color: Colors.white,
      fontSize: 16
  ),
),
BubbleSpecialThree(
  text: 'Please try and give some feedback on it!',
  color: Color(0xFF1B97F3),
  tail: true,
  textStyle: TextStyle(
    color: Colors.white,
    fontSize: 16
  ),
),
BubbleSpecialThree(
  text: 'Sure',
  color: Color(0xFFE8E8EE),
  tail: false,
  isSender: false,
),
BubbleSpecialThree(
  text: "I tried. It's awesome!!!",
  color: Color(0xFFE8E8EE),
  tail: false,
  isSender: false,
),
BubbleSpecialThree(
  text: "Thanks",
  color: Color(0xFFE8E8EE),
  tail: true,
  isSender: false,
)

Single bubble example

  BubbleSpecialOne(
    text: 'Hi, How are you? ',
    isSender: false,
    color: Colors.purple.shade100,
    textStyle: TextStyle(
      fontSize: 20,
      color: Colors.purple,
      fontStyle: FontStyle.italic,
      fontWeight: FontWeight.bold,
    ),
  ),

Audio chat bubble example

  Duration duration = new Duration();
  Duration position = new Duration();
  bool isPlaying = false;
  bool isLoading = false;
  bool isPause = false;

  BubbleNormalAudio(
    color: Color(0xFFE8E8EE),
    duration: duration.inSeconds.toDouble(),
    position: position.inSeconds.toDouble(),
    isPlaying: isPlaying,
    isLoading: isLoading,
    isPause: isPause,
    onSeekChanged: _changeSeek,
    onPlayPauseButtonClick: _playAudio,
    sent: true,
  ),

Image chat bubble example

  BubbleNormalImage(
    id: 'id001',
    image: _image(),
    color: Colors.purpleAccent,
    tail: true,
    delivered: true,
  ),

Date Chip example

  DateChip(
    date: new DateTime(2021, 5, 7),
    color: Color(0x558AD3D5),
  ),

Message bar example

MessageBar(
    onSend: (_) => print(_),
    actions: [
      InkWell(
        child: Icon(
          Icons.add,
          color: Colors.black,
          size: 24,
        ),
        onTap: () {},
      ),
      Padding(
        padding: EdgeInsets.only(left: 8, right: 8),
        child: InkWell(
          child: Icon(
            Icons.camera_alt,
            color: Colors.green,
            size: 24,
          ),
          onTap: () {},
        ),
      ),
    ],
  ),

Main example (Chat View)

Checkout the plugin example to figure out more.

Duration duration = new Duration();
Duration position = new Duration();
bool isPlaying = false;
bool isLoading = false;
bool isPause = false;

@override
Widget build(BuildContext context) {
  final now = new DateTime.now();
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: Stack(
      children: [
        SingleChildScrollView(
          child: Column(
            children: <Widget>[
              BubbleNormalImage(
                  id: 'id001',
                  image: _image(),
                  color: Colors.purpleAccent,
                  tail: true,
                  delivered: true,
              ),
              BubbleNormalAudio(
                color: Color(0xFFE8E8EE),
                duration: duration.inSeconds.toDouble(),
                position: position.inSeconds.toDouble(),
                isPlaying: isPlaying,
                isLoading: isLoading,
                isPause: isPause,
                onSeekChanged: _changeSeek,
                onPlayPauseButtonClick: _playAudio,
                sent: true,
              ),
              BubbleNormal(
                text: 'bubble normal with tail',
                isSender: false,
                color: Color(0xFF1B97F3),
                tail: true,
                textStyle: TextStyle(
                  fontSize: 20,
                  color: Colors.white,
                ),
              ),
              BubbleNormal(
                text: 'bubble normal with tail',
                isSender: true,
                color: Color(0xFFE8E8EE),
                tail: true,
                sent: true,
              ),
              DateChip(
                date: new DateTime(now.year, now.month, now.day - 2),
              ),
              BubbleNormal(
                text: 'bubble normal without tail',
                isSender: false,
                color: Color(0xFF1B97F3),
                tail: false,
                textStyle: TextStyle(
                  fontSize: 20,
                  color: Colors.white,
                ),
              ),
              BubbleNormal(
                text: 'bubble normal without tail',
                color: Color(0xFFE8E8EE),
                tail: false,
                sent: true,
                seen: true,
                delivered: true,
              ),
              BubbleSpecialOne(
                text: 'bubble special one with tail',
                isSender: false,
                color: Color(0xFF1B97F3),
                textStyle: TextStyle(
                  fontSize: 20,
                  color: Colors.white,
                ),
              ),
              DateChip(
                date: new DateTime(now.year, now.month, now.day - 1),
              ),
              BubbleSpecialOne(
                text: 'bubble special one with tail',
                color: Color(0xFFE8E8EE),
                seen: true,
              ),
              BubbleSpecialOne(
                text: 'bubble special one without tail',
                isSender: false,
                tail: false,
                color: Color(0xFF1B97F3),
                textStyle: TextStyle(
                  fontSize: 20,
                  color: Colors.black,
                ),
              ),
              BubbleSpecialOne(
                text: 'bubble special one without tail',
                tail: false,
                color: Color(0xFFE8E8EE),
                sent: true,
              ),
              BubbleSpecialTwo(
                text: 'bubble special tow with tail',
                isSender: false,
                color: Color(0xFF1B97F3),
                textStyle: TextStyle(
                  fontSize: 20,
                  color: Colors.black,
                ),
              ),
              DateChip(
                date: now,
              ),
              BubbleSpecialTwo(
                text: 'bubble special tow with tail',
                isSender: true,
                color: Color(0xFFE8E8EE),
                sent: true,
              ),
              BubbleSpecialTwo(
                text: 'bubble special tow without tail',
                isSender: false,
                tail: false,
                color: Color(0xFF1B97F3),
                textStyle: TextStyle(
                  fontSize: 20,
                  color: Colors.black,
                ),
              ),
              BubbleSpecialTwo(
                text: 'bubble special tow without tail',
                tail: false,
                color: Color(0xFFE8E8EE),
                delivered: true,
              ),
              BubbleSpecialThree(
                text: 'bubble special three without tail',
                color: Color(0xFF1B97F3),
                tail: false,
                textStyle: TextStyle(color: Colors.white, fontSize: 16),
              ),
              BubbleSpecialThree(
                text: 'bubble special three with tail',
                color: Color(0xFF1B97F3),
                tail: true,
                textStyle: TextStyle(color: Colors.white, fontSize: 16),
              ),
              BubbleSpecialThree(
                text: "bubble special three without tail",
                color: Color(0xFFE8E8EE),
                tail: false,
                isSender: false,
              ),
              BubbleSpecialThree(
                text: "bubble special three with tail",
                color: Color(0xFFE8E8EE),
                tail: true,
                isSender: false,
              ),
              SizedBox(
                height: 100,
              )
            ],
          ),
        ),
        MessageBar(
          onSend: (_) => print(_),
          actions: [
            InkWell(
              child: Icon(
                Icons.add,
                color: Colors.black,
                size: 24,
              ),
              onTap: () {},
            ),
            Padding(
              padding: EdgeInsets.only(left: 8, right: 8),
              child: InkWell(
                child: Icon(
                  Icons.camera_alt,
                  color: Colors.green,
                  size: 24,
                ),
                onTap: () {},
              ),
            ),
          ],
        ),
      ],
    ),
    // This trailing comma makes auto-formatting nicer for build methods.
  );
}

Issues

Please feel free to let me know any issue regarding to this plugin.

chat_bubbles's Issues

How to change text color?

there is no api to change text color

Delivered or Seen wont take effect

Hi

When sent is set to true, delivered / seen is ignored.

can we have delivered show the double bar even when sent is set to true?

Cheers

Hello, possible support for popup emoji panel from bottom?

Hello, possible support for popup emoji panel from bottom?

Video and Image types

Thanks for your work, is there a bubble type for video and image messages

TextController value is lost on state change

Hi, i found the following issues while using plugin. The value / state of keyboard entry is lost when any of the following event is fired. (keyboard close, keyboard mode toggle).

This is as a result of using a "Stateless" widget on the "MessageBar" class. I had to convert the class to "Stateful" widget to override this behaviour.

[ message_bar.dart ]

import 'package:flutter/material.dart';

///Normal Message bar with more actions
///
/// following attributes can be modified
///
///
/// # BOOLEANS
/// [replying] is additional reply widget top of the message bar
///
/// # STRINGS
/// [replyingTo] is a string to tag the replying message
///
/// # WIDGETS
/// [actions] are the additional leading action buttons like camera
/// and file select
///
/// # COLORS
/// [replyWidgetColor] is reply widget color
/// [replyIconColor] is the reply icon color on the left side of reply widget
/// [replyCloseColor] is the close icon color on the right side of the reply
/// widget
/// [messageBarColor] is the color of the message bar
/// [sendButtonColor] is the color of the send button
///
/// # METHODS
/// [onTextChanged] is function which triggers after text every text change
/// [onSend] is send button action
/// [onTapCloseReply] is close button action of the close button on the
/// reply widget usually change [replying] attribute to false

class MessageBar extends StatefulWidget {
final bool replying;
final String replyingTo;
final List actions;
final Color replyWidgetColor;
final Color replyIconColor;
final Color replyCloseColor;
final Color messageBarColor;
final Color sendButtonColor;
final void Function(String)? onTextChanged;
final void Function(String)? onSend;
final void Function()? onTapCloseReply;

/// [MessageBar] constructor
///
///
MessageBar({
this.replying = false,
this.replyingTo = "",
this.actions = const [],
this.replyWidgetColor = const Color(0xffF4F4F5),
this.replyIconColor = Colors.blue,
this.replyCloseColor = Colors.black12,
this.messageBarColor = const Color(0xffF4F4F5),
this.sendButtonColor = Colors.blue,
this.onTextChanged,
this.onSend,
this.onTapCloseReply,
});

@OverRide
State createState() => _MessageBarState();
}

class _MessageBarState extends State {
final TextEditingController _textController = TextEditingController();
/// [MessageBar] builder method
///
@OverRide
Widget build(BuildContext context) {
return Align(
alignment: Alignment.bottomCenter,
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
widget.replying
? Container(
color: widget.replyWidgetColor,
padding: const EdgeInsets.symmetric(
vertical: 8,
horizontal: 16,
),
child: Row(
children: [
Icon(
Icons.reply,
color: widget.replyIconColor,
size: 24,
),
Expanded(
child: Container(
child: Text(
'Re : ' + widget.replyingTo,
overflow: TextOverflow.ellipsis,
),
),
),
InkWell(
onTap: widget.onTapCloseReply,
child: Icon(
Icons.close,
color: widget.replyCloseColor,
size: 24,
),
),
],
))
: Container(),
widget.replying
? Container(
height: 1,
color: Colors.grey.shade300,
)
: Container(),
Container(
color: widget.messageBarColor,
padding: const EdgeInsets.symmetric(
vertical: 8,
horizontal: 16,
),
child: Row(
children: [
...widget.actions,
Expanded(
child: Container(
child: TextField(
controller: _textController,
keyboardType: TextInputType.multiline,
textCapitalization: TextCapitalization.sentences,
minLines: 1,
maxLines: 3,
onChanged: widget.onTextChanged,
decoration: InputDecoration(
hintText: "Type your message here",
hintMaxLines: 1,
contentPadding: const EdgeInsets.symmetric(
horizontal: 8.0, vertical: 10),
hintStyle: TextStyle(
fontSize: 16,
),
fillColor: Colors.white,
filled: true,
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
borderSide: const BorderSide(
color: Colors.white,
width: 0.2,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
borderSide: const BorderSide(
color: Colors.black26,
width: 0.2,
),
),
),
),
),
),
Padding(
padding: const EdgeInsets.only(left: 16),
child: InkWell(
child: Icon(
Icons.send,
color: widget.sendButtonColor,
size: 24,
),
onTap: () {
if (_textController.text.trim() != '') {
if (widget.onSend != null) {
widget.onSend!(_textController.text.trim());
}
_textController.text = '';
}
},
),
),
],
),
),
],
),
),
);
}
}

Adding Custom Widget Inside message bubble

it should have parameter child which can have any Widget which will be displayed inside message bubble

Use RenderObject for Chat Bubbles

In the flutter build show, the flutter team showed how to build chat bubbles that behave like whatsapp in term of placing the date and read icon depending of the text length. https://www.youtube.com/watch?v=cq34RWXegM8

I think implementing their solution would increase the quality of this package dramatically.

For Group Chat unable to show the sender name

i am making app where there is a group chat so i need to show that who had send the message above the message the user name will be written in different TextStyle which i am unable to do here

Trailing Widget not being shown when isSender is true

As the title says

 return BubbleNormal(
                            leading: CircleAvatar(
                              backgroundColor: Colors.red,
                              child: Text(
                                'R',
                                style: kSmall1.copyWith(color: kNeutralW),
                              ),
                            ),
                            trailing: CircleAvatar(
                              backgroundColor: Colors.red,
                              child: Text(
                                'A',
                                style: kSmall1.copyWith(color: kNeutralW),
                              ),
                            ),
                            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
                            text: messages[index],
                            color: index % 2 == 0 ? kPrimary6 : kNeutralW,
                            tail: true,
                            isSender: true,
                            textStyle: kSmall2,
                          );

This is the code I'm using to show users profile picture on the chat but the trailing widget is never shown

Pls remove margin for bubble

RTL Support?

Hi,
i can't find any way to make your widget support RTL text, is there an option or its not supported?
Cool widget by the way

Adding RichText

Unable to add richtext inside message box

Add Markdown support

Would it be relevant to add markdown support ? Generative AI uses markdown so for example instead of showing text wrapped in "**", markdown will show bold text.

flutter_markdown package could be used.

I can submit the PR if you want, my code is ready.

Otherwise, why not take a Widget child as parameter instead of a String text ? This way, you won't have to add a dependency to your package. That would be a breaking change though. Or a new widget MarkdownBubble ?

Audio chat bubble duration / position display text recommendation

Hi, I would like to ask if we can customize the duration / position text without changing the source code by entering bubbles/bubble_normal_audio.dart file.

The following txt file bubble_normal_audio.txt (as github does not support .dart) would be my suggestion by adding 3 lines with comment // newly added.

Thank you so much for creating this library.

bubble_normal_audio.txt

Is it possible to change the Text to SelectableText so that the consumer can copy?

Is it possible to change the Text to SelectableText so that the consumer can copy?

please add the parameter to the TextStyle for the TextField in the MessageBar widget

i am facing issue on dark mode with the text input color

Possibility to change the placeholder of MessageBar

A must for multi language apps.

BubbleNormalAudio duration

'package:flutter/src/material/slider.dart':
Failed assertion: line 194 pos 15: 'value >= min && value <= max'

I am using this chat in bottomsheet ....my send message textfield's height is gone large. Please let me khow some solution for that

https://prnt.sc/bcyLFfFh4FLM

Possibility to add a widget / extra icon to the chat bubble

Hi!
This is a great package, thanks for developing it! :) I know my request might sound a bit too specific, but I need to add an additional icon next to the text that can be tapped. So the normal text + an IconButton next to the text (either on the right or left side) would be useful for me. Being able to provide a custom widget as content would also be OK. :)

Thanks!
Bence

Issue displaying: Spanish accented characters

please see attached image:

Question: Is there a way to set UTF-8 for all rendered text from ChatGPT?

Thanks

chat bubble

when I add this dependencies I received erorr code 65

how to implement emoji as an action button

Thanks for this wonderful plugin. I would like to add emoji add button to MessageBar like above. But I could not figure out how to implement this. Is it possible to add as an InkWell object? How should I proceed? Thanks.

      actions: [
        InkWell(
          child: Icon(
            Icons.emoji,
            color: Colors.black,
            size: 24,
          ),
          onTap: () => openEmojis(),
        ),
      ]

is is possible to pick document and show in chat using this package

Message bar textfield fill color

Not able to change fill color of the message bar

We cannot change text field fill color

When I mix BubbleSpecialThree and BubbleNormalAudio, caused overflow

Function text include date at the very end text

Hello sir, can you add one more function to put date inside the chat bubble?

date

Datechip take the complete width of screen

Add reply message option and design.

Please add the reply message feature in chat bubbles. It will be a great help. Thanks