Skip to main content
The CometChat V6 UI Kit provides CometChatOutgoingMessageBubbleStyle and CometChatIncomingMessageBubbleStyle for fine-grained control over message bubble appearance. These classes extend ThemeExtension, allowing customizations through global theming or explicit style objects.

​
How These Classes Help

​
1. Targeted Customization

Customize specific attributes of message bubbles:
  • Background color, border radius, text style
  • Specialized bubbles: Audio, File, Collaborative, Poll, Deleted, Link Preview, Sticker, Call bubbles
  • Reactions, timestamps, avatars, and borders

​
2. Unified Global Theming

Apply styles via Flutter’s global theming or pass them to CometChatMessageListStyle: 
MaterialApp(
  title: 'Your app',
  theme: ThemeData(
    extensions: [
      CometChatIncomingMessageBubbleStyle(
        backgroundColor: Color(0xFFF76808),
      ),
      CometChatOutgoingMessageBubbleStyle(
        backgroundColor: Color(0xFFF76808),
      ),
    ],
  ),
  home: ...,
);

​
3. Ease of Integration

Pass styles directly to CometChatMessageList: 
CometChatMessageList(
  user: user,
  group: group,
  style: CometChatMessageListStyle(
    incomingMessageBubbleStyle: CometChatIncomingMessageBubbleStyle(),
    outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(),
  ),
)

​
Customizable Message Bubbles

​
Text Bubble

ThemeData(
  extensions: [
    CometChatOutgoingMessageBubbleStyle(
      textBubbleStyle: CometChatTextBubbleStyle(
        backgroundColor: Color(0xFFF76808),
      ),
    ),
    CometChatIncomingMessageBubbleStyle(
      textBubbleStyle: CometChatTextBubbleStyle(
        backgroundColor: Color(0xFFFEEDE1),
      ),
    ),
  ],
)

​
Image Bubble

ThemeData(
  extensions: [
    CometChatOutgoingMessageBubbleStyle(
      imageBubbleStyle: CometChatImageBubbleStyle(
        backgroundColor: Color(0xFFF76808),
      ),
    ),
    CometChatIncomingMessageBubbleStyle(
      imageBubbleStyle: CometChatImageBubbleStyle(
        backgroundColor: Color(0xFFFEEDE1),
      ),
    ),
  ],
)

​
Video Bubble

ThemeData(
  extensions: [
    CometChatOutgoingMessageBubbleStyle(
      videoBubbleStyle: CometChatVideoBubbleStyle(
        backgroundColor: Color(0xFFF76808),
        playIconColor: Color(0xFFF76808),
      ),
    ),
    CometChatIncomingMessageBubbleStyle(
      videoBubbleStyle: CometChatVideoBubbleStyle(
        backgroundColor: Color(0xFFFEEDE1),
        playIconColor: Color(0xFFF76808),
      ),
    ),
  ],
)

​
Audio Bubble

ThemeData(
  extensions: [
    CometChatOutgoingMessageBubbleStyle(
      audioBubbleStyle: CometChatAudioBubbleStyle(
        backgroundColor: Color(0xFFF76808),
        playIconColor: Color(0xFFF76808),
      ),
    ),
    CometChatIncomingMessageBubbleStyle(
      audioBubbleStyle: CometChatAudioBubbleStyle(
        backgroundColor: Color(0xFFFEEDE1),
        downloadIconColor: Color(0xFFF76808),
        audioBarColor: Color(0xFFF76808),
        playIconColor: Color(0xFFF76808),
      ),
    ),
  ],
)

​
File Bubble

ThemeData(
  extensions: [
    CometChatOutgoingMessageBubbleStyle(
      fileBubbleStyle: CometChatFileBubbleStyle(
        backgroundColor: Color(0xFFF76808),
      ),
    ),
    CometChatIncomingMessageBubbleStyle(
      fileBubbleStyle: CometChatFileBubbleStyle(
        backgroundColor: Color(0xFFFEEDE1),
        downloadIconTint: Color(0xFFF76808),
      ),
    ),
  ],
)

​
Sticker Bubble

ThemeData(
  extensions: [
    CometChatOutgoingMessageBubbleStyle(
      stickerBubbleStyle: CometChatStickerBubbleStyle(
        backgroundColor: Color(0xFFF76808),
      ),
    ),
    CometChatIncomingMessageBubbleStyle(
      stickerBubbleStyle: CometChatStickerBubbleStyle(
        backgroundColor: Color(0xFFFEEDE1),
      ),
    ),
  ],
)

​
Call Bubble

ThemeData(
  extensions: [
    CometChatOutgoingMessageBubbleStyle(
      videoCallBubbleStyle: CometChatCallBubbleStyle(
        backgroundColor: Color(0xFFF76808),
        iconColor: Color(0xFFF76808),
        buttonTextStyle: TextStyle(color: Colors.white),
        dividerColor: Color(0xFFFBAA75),
      ),
    ),
    CometChatIncomingMessageBubbleStyle(
      videoCallBubbleStyle: CometChatCallBubbleStyle(
        backgroundColor: Color(0xFFFEEDE1),
        iconColor: Color(0xFFF76808),
        buttonTextStyle: TextStyle(color: Color(0xFFF76808)),
      ),
    ),
  ],
)

​
Collaborative Whiteboard Bubble

ThemeData(
  extensions: [
    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),
      ),
    ),
    CometChatIncomingMessageBubbleStyle(
      collaborativeWhiteboardBubbleStyle: CometChatCollaborativeBubbleStyle(
        backgroundColor: Color(0xFFFEEDE1),
        iconTint: Color(0xFFF76808),
        titleStyle: TextStyle(fontWeight: FontWeight.bold),
        buttonTextStyle: TextStyle(color: Color(0xFFF76808)),
      ),
    ),
  ],
)

​
Collaborative Document Bubble

ThemeData(
  extensions: [
    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),
      ),
    ),
    CometChatIncomingMessageBubbleStyle(
      collaborativeDocumentBubbleStyle: CometChatCollaborativeBubbleStyle(
        backgroundColor: Color(0xFFFEEDE1),
        iconTint: Color(0xFFF76808),
        titleStyle: TextStyle(fontWeight: FontWeight.bold),
        buttonTextStyle: TextStyle(color: Color(0xFFF76808)),
      ),
    ),
  ],
)

​
Poll Bubble

ThemeData(
  extensions: [
    CometChatOutgoingMessageBubbleStyle(
      pollsBubbleStyle: CometChatPollsBubbleStyle(
        backgroundColor: Color(0xFFF76808),
        progressBackgroundColor: Color(0xFFFBAA75),
        iconColor: Color(0xFFF76808),
      ),
    ),
    CometChatIncomingMessageBubbleStyle(
      pollsBubbleStyle: CometChatPollsBubbleStyle(
        backgroundColor: Color(0xFFFEEDE1),
        progressBackgroundColor: Color(0xFFDCDCDC),
        progressColor: Color(0xFFF76808),
        iconColor: Colors.white,
        selectedOptionColor: Color(0xFFF76808),
      ),
    ),
  ],
)

ThemeData(
  extensions: [
    CometChatOutgoingMessageBubbleStyle(
      linkPreviewBubbleStyle: CometChatLinkPreviewBubbleStyle(
        backgroundColor: Color(0xFFFBAA75),
      ),
      textBubbleStyle: CometChatTextBubbleStyle(
        backgroundColor: Color(0xFFF76808),
      ),
    ),
    CometChatIncomingMessageBubbleStyle(
      linkPreviewBubbleStyle: CometChatLinkPreviewBubbleStyle(
        backgroundColor: Color(0xFFFBAA75),
      ),
      textBubbleStyle: CometChatTextBubbleStyle(
        backgroundColor: Color(0xFFFEEDE1),
      ),
    ),
  ],
)

​
Action Message Bubble

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

​
Deleted Message Bubble

ThemeData(
  extensions: [
    CometChatOutgoingMessageBubbleStyle(
      deletedBubbleStyle: CometChatDeletedBubbleStyle(
        backgroundColor: Color(0xFFF76808),
      ),
    ),
    CometChatIncomingMessageBubbleStyle(
      deletedBubbleStyle: CometChatDeletedBubbleStyle(
        backgroundColor: Color(0xFFFEEDE1),
      ),
    ),
  ],
)

​
AI Assistant Bubble

ThemeData(
  extensions: [
    CometChatAiAssistantBubbleStyle(
      backgroundColor: Colors.transparent,
      textColor: const Color(0xFF141414),
    ),
  ],
)