Customizing Message Bubbles

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:

Dart

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:

Dart

CometChatMessageList(
  user: user,
  group: group,
  style: CometChatMessageListStyle(
    incomingMessageBubbleStyle: CometChatIncomingMessageBubbleStyle(),
    outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(),
  ),
)

Customizable Message Bubbles

Text Bubble

Dart

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

Image Bubble

Dart

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

Video Bubble

Dart

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

Audio Bubble

Dart

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

Dart

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

Sticker Bubble

Dart

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

Call Bubble

Dart

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

Dart

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

Dart

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

Dart

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),
      ),
    ),
  ],
)

Link Preview Bubble

Dart

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

Dart

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

Deleted Message Bubble

Dart

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

AI Assistant Bubble

Dart

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

​How These Classes Help

​1. Targeted Customization

​2. Unified Global Theming

​3. Ease of Integration

​Customizable Message Bubbles

​Text Bubble

​Image Bubble

​Video Bubble

​Audio Bubble

​File Bubble

​Sticker Bubble

​Call Bubble

​Collaborative Whiteboard Bubble

​Collaborative Document Bubble

​Poll Bubble

​Link Preview Bubble

​Action Message Bubble

​Deleted Message Bubble

​AI Assistant Bubble