Skip to main content
FieldValue
OutgoingCometChatOutgoingMessageBubbleStyle
IncomingCometChatIncomingMessageBubbleStyle
ActionCometChatActionBubbleStyle
AI AssistantCometChatAiAssistantBubbleStyle
UsageAdd to ThemeData.extensions or pass to CometChatMessageListStyle
Bubble typesText, Image, Video, Audio, File, Poll, Sticker, Voice Call, Video Call, Link Preview, Collaborative Document, Collaborative Whiteboard, Message Translation, Deleted, Action, AI Assistant
SourceGitHub
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),
  ),
)
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

PropertyTypeDescription
backgroundColorColor?Background color of the message bubble
borderBoxBorder?Border of the message bubble
borderRadiusBorderRadiusGeometry?Border radius of the message bubble
messageBubbleBackgroundImageDecorationImage?Background image for the bubble
threadedMessageIndicatorTextStyleTextStyle?Text style for threaded message indicator
threadedMessageIndicatorIconColorColor?Icon color for threaded message indicator
messageBubbleAvatarStyleCometChatAvatarStyle?Style for sender avatar
messageReceiptStyleCometChatMessageReceiptStyle?Style for message receipts
messageBubbleReactionStyleCometChatReactionsStyle?Style for message reactions
messageBubbleDateStyleCometChatDateStyle?Style for message date
textBubbleStyleCometChatTextBubbleStyle?Style for text messages
imageBubbleStyleCometChatImageBubbleStyle?Style for image messages
videoBubbleStyleCometChatVideoBubbleStyle?Style for video messages
audioBubbleStyleCometChatAudioBubbleStyle?Style for audio messages
fileBubbleStyleCometChatFileBubbleStyle?Style for file messages
pollsBubbleStyleCometChatPollsBubbleStyle?Style for poll messages
stickerBubbleStyleCometChatStickerBubbleStyle?Style for sticker messages
voiceCallBubbleStyleCometChatCallBubbleStyle?Style for voice call bubbles
videoCallBubbleStyleCometChatCallBubbleStyle?Style for video call bubbles
linkPreviewBubbleStyleCometChatLinkPreviewBubbleStyle?Style for link preview bubbles
collaborativeDocumentBubbleStyleCometChatCollaborativeBubbleStyle?Style for collaborative document bubbles
collaborativeWhiteboardBubbleStyleCometChatCollaborativeBubbleStyle?Style for collaborative whiteboard bubbles
messageTranslationBubbleStyleCometChatMessageTranslationBubbleStyle?Style for translated messages
deletedBubbleStyleCometChatDeletedBubbleStyle?Style for deleted messages
moderationStyleCometChatModerationStyle?Style for moderated messages
messagePreviewStyleCometChatMessagePreviewStyle?Style for message previews
exceptionStyleCometChatExceptionStyle?Style for exception views

CometChatIncomingMessageBubbleStyle

Includes all properties from CometChatOutgoingMessageBubbleStyle except messageReceiptStyle, moderationStyle, and exceptionStyle, plus:
PropertyTypeDescription
senderNameTextStyleTextStyle?Text style for sender name
aiAssistantBubbleStyleCometChatAIAssistantBubbleStyle?Style for AI assistant bubbles

CometChatActionBubbleStyle

PropertyTypeDescription
backgroundColorColor?Background color of action bubble
borderBoxBorder?Border of action bubble
textStyleTextStyle?Text style for action message

CometChatAiAssistantBubbleStyle

PropertyTypeDescription
backgroundColorColor?Background color of AI assistant bubble
textColorColor?Text color
textStyleTextStyle?Text style for AI messages