Message Bubble Styling - CometChat Docs

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

​Global Theming

​Component-Level Styling

​Bubble Types

​Text Bubble

​Image Bubble

​Video Bubble

​Audio Bubble

​File Bubble

​Poll Bubble

​Call Bubble

​Link Preview Bubble

​Deleted Message Bubble

​Collaborative Bubbles

​Sticker Bubble

​Voice Call Bubble

​Action Message Bubble

​AI Assistant Bubble

​Style Properties Reference

​CometChatOutgoingMessageBubbleStyle

​CometChatIncomingMessageBubbleStyle

​CometChatActionBubbleStyle

​CometChatAiAssistantBubbleStyle