Message Bubble Styling

Customize incoming and outgoing message bubbles in CometChat Flutter UI Kit.

AI Agent Component Spec

Field	Value
Outgoing	CometChatOutgoingMessageBubbleStyle
Incoming	CometChatIncomingMessageBubbleStyle
Action	CometChatActionBubbleStyle
AI Assistant	CometChatAiAssistantBubbleStyle
Usage	Add to ThemeData.extensions or pass to CometChatMessageListStyle
Bubble types	Text, Image, Video, Audio, File, Poll, Sticker, Voice Call, Video Call, Link Preview, Collaborative Document, Collaborative Whiteboard, Message Translation, Deleted, Action, AI Assistant
Source	GitHub

Customize message bubbles using CometChatOutgoingMessageBubbleStyle and CometChatIncomingMessageBubbleStyle.

---

Global Theming

Apply bubble styles globally via ThemeData.extensions:

MaterialApp(
  theme: ThemeData(
    extensions: [
      CometChatOutgoingMessageBubbleStyle(
        backgroundColor: Color(0xFFF76808),
      ),
      CometChatIncomingMessageBubbleStyle(
        backgroundColor: Color(0xFFFEEDE1),
      ),
    ],
  ),
)

---

Component-Level Styling

Pass styles directly to CometChatMessageList:

CometChatMessageList(
  user: user,
  style: CometChatMessageListStyle(
    outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
      backgroundColor: Color(0xFFF76808),
    ),
    incomingMessageBubbleStyle: CometChatIncomingMessageBubbleStyle(
      backgroundColor: Color(0xFFFEEDE1),
    ),
  ),
)

---

Bubble Types

Text Bubble

CometChatOutgoingMessageBubbleStyle(
  textBubbleStyle: CometChatTextBubbleStyle(
    backgroundColor: Color(0xFFF76808),
  ),
)

Image Bubble

CometChatOutgoingMessageBubbleStyle(
  imageBubbleStyle: CometChatImageBubbleStyle(
    backgroundColor: Color(0xFFF76808),
  ),
)

Video Bubble

CometChatOutgoingMessageBubbleStyle(
  videoBubbleStyle: CometChatVideoBubbleStyle(
    backgroundColor: Color(0xFFF76808),
    playIconColor: Color(0xFFF76808),
  ),
)

Audio Bubble

CometChatIncomingMessageBubbleStyle(
  audioBubbleStyle: CometChatAudioBubbleStyle(
    backgroundColor: Color(0xFFFEEDE1),
    downloadIconColor: Color(0xFFF76808),
    audioBarColor: Color(0xFFF76808),
    playIconColor: Color(0xFFF76808),
  ),
)

File Bubble

CometChatIncomingMessageBubbleStyle(
  fileBubbleStyle: CometChatFileBubbleStyle(
    backgroundColor: Color(0xFFFEEDE1),
    downloadIconTint: Color(0xFFF76808),
  ),
)

Poll Bubble

CometChatOutgoingMessageBubbleStyle(
  pollsBubbleStyle: CometChatPollsBubbleStyle(
    backgroundColor: Color(0xFFF76808),
    progressBackgroundColor: Color(0xFFFBAA75),
    iconColor: Color(0xFFF76808),
  ),
)

Call Bubble

CometChatOutgoingMessageBubbleStyle(
  videoCallBubbleStyle: CometChatCallBubbleStyle(
    backgroundColor: Color(0xFFF76808),
    iconColor: Color(0xFFF76808),
    buttonTextStyle: TextStyle(color: Colors.white),
    dividerColor: Color(0xFFFBAA75),
  ),
)

Link Preview Bubble

CometChatOutgoingMessageBubbleStyle(
  linkPreviewBubbleStyle: CometChatLinkPreviewBubbleStyle(
    backgroundColor: Color(0xFFFBAA75),
  ),
  textBubbleStyle: CometChatTextBubbleStyle(
    backgroundColor: Color(0xFFF76808),
  ),
)

Deleted Message Bubble

CometChatOutgoingMessageBubbleStyle(
  deletedBubbleStyle: CometChatDeletedBubbleStyle(
    backgroundColor: Color(0xFFF76808),
  ),
)

Collaborative Bubbles

// Collaborative Whiteboard
CometChatOutgoingMessageBubbleStyle(
  collaborativeWhiteboardBubbleStyle: CometChatCollaborativeBubbleStyle(
    backgroundColor: Color(0xFFF76808),
    iconTint: Color(0xFFFFFFFF),
    titleStyle: TextStyle(fontWeight: FontWeight.bold, color: Color(0xFFFFFFFF)),
    buttonTextStyle: TextStyle(color: Color(0xFFFFFFFF)),
    dividerColor: Color(0xFFFBAA75),
  ),
)

// Collaborative Document
CometChatOutgoingMessageBubbleStyle(
  collaborativeDocumentBubbleStyle: CometChatCollaborativeBubbleStyle(
    backgroundColor: Color(0xFFF76808),
    iconTint: Color(0xFFFFFFFF),
    titleStyle: TextStyle(fontWeight: FontWeight.bold, color: Color(0xFFFFFFFF)),
    buttonTextStyle: TextStyle(color: Color(0xFFFFFFFF)),
    dividerColor: Color(0xFFFBAA75),
  ),
)

Sticker Bubble

CometChatOutgoingMessageBubbleStyle(
  stickerBubbleStyle: CometChatStickerBubbleStyle(
    backgroundColor: Color(0xFFF76808),
    borderRadius: BorderRadius.circular(12),
  ),
)

Voice Call Bubble

CometChatOutgoingMessageBubbleStyle(
  voiceCallBubbleStyle: CometChatCallBubbleStyle(
    backgroundColor: Color(0xFFF76808),
    iconColor: Color(0xFFFFFFFF),
    buttonTextStyle: TextStyle(color: Colors.white),
  ),
)

Action Message Bubble

Style activity-driven notifications like “User joined” or “User left”:

ThemeData(
  extensions: [
    CometChatActionBubbleStyle(
      textStyle: TextStyle(color: Color(0xFFF76808)),
      border: Border.all(color: Color(0xFFF76808)),
      backgroundColor: Color(0xFFFEEDE1),
    ),
  ],
)

AI Assistant Bubble

ThemeData(
  extensions: [
    CometChatAiAssistantBubbleStyle(
      backgroundColor: Colors.transparent,
      textColor: Color(0xFF141414),
      textStyle: TextStyle(fontFamily: 'Roboto'),
    ),
  ],
)

---

Style Properties Reference

CometChatOutgoingMessageBubbleStyle

Property	Type	Description
backgroundColor	Color?	Background color of the message bubble
border	BoxBorder?	Border of the message bubble
borderRadius	BorderRadiusGeometry?	Border radius of the message bubble
messageBubbleBackgroundImage	DecorationImage?	Background image for the bubble
threadedMessageIndicatorTextStyle	TextStyle?	Text style for threaded message indicator
threadedMessageIndicatorIconColor	Color?	Icon color for threaded message indicator
messageBubbleAvatarStyle	CometChatAvatarStyle?	Style for sender avatar
messageReceiptStyle	CometChatMessageReceiptStyle?	Style for message receipts
messageBubbleReactionStyle	CometChatReactionsStyle?	Style for message reactions
messageBubbleDateStyle	CometChatDateStyle?	Style for message date
textBubbleStyle	CometChatTextBubbleStyle?	Style for text messages
imageBubbleStyle	CometChatImageBubbleStyle?	Style for image messages
videoBubbleStyle	CometChatVideoBubbleStyle?	Style for video messages
audioBubbleStyle	CometChatAudioBubbleStyle?	Style for audio messages
fileBubbleStyle	CometChatFileBubbleStyle?	Style for file messages
pollsBubbleStyle	CometChatPollsBubbleStyle?	Style for poll messages
stickerBubbleStyle	CometChatStickerBubbleStyle?	Style for sticker messages
voiceCallBubbleStyle	CometChatCallBubbleStyle?	Style for voice call bubbles
videoCallBubbleStyle	CometChatCallBubbleStyle?	Style for video call bubbles
linkPreviewBubbleStyle	CometChatLinkPreviewBubbleStyle?	Style for link preview bubbles
collaborativeDocumentBubbleStyle	CometChatCollaborativeBubbleStyle?	Style for collaborative document bubbles
collaborativeWhiteboardBubbleStyle	CometChatCollaborativeBubbleStyle?	Style for collaborative whiteboard bubbles
messageTranslationBubbleStyle	CometChatMessageTranslationBubbleStyle?	Style for translated messages
deletedBubbleStyle	CometChatDeletedBubbleStyle?	Style for deleted messages
moderationStyle	CometChatModerationStyle?	Style for moderated messages
messagePreviewStyle	CometChatMessagePreviewStyle?	Style for message previews
exceptionStyle	CometChatExceptionStyle?	Style for exception views

CometChatIncomingMessageBubbleStyle

Includes all properties from CometChatOutgoingMessageBubbleStyle except messageReceiptStyle, moderationStyle, and exceptionStyle, plus:

Property	Type	Description
senderNameTextStyle	TextStyle?	Text style for sender name
aiAssistantBubbleStyle	CometChatAIAssistantBubbleStyle?	Style for AI assistant bubbles

CometChatActionBubbleStyle

Property	Type	Description
backgroundColor	Color?	Background color of action bubble
border	BoxBorder?	Border of action bubble
textStyle	TextStyle?	Text style for action message

CometChatAiAssistantBubbleStyle

Property	Type	Description
backgroundColor	Color?	Background color of AI assistant bubble
textColor	Color?	Text color
textStyle	TextStyle?	Text style for AI messages