Bubble Config

BubbleConfig controls the built-in message bubble shell. It does not expose per-message-type media layout options. For custom message content, use customMessageBubbleBuilders.

Entry Point

Dart

ChatPage(
  channel: channel,
  config: const ChatPageConfig(
    bubbleConfig: BubbleConfig(
      borderRadius: 14,
    ),
  ),
)

BubbleConfig

Fields:

• sentStyle: MessageStyleConfig used for outbound messages.
• receivedStyle: MessageStyleConfig used for inbound messages.
• borderRadius: radius applied to the built-in bubble container.
• avatarConfig: ChatAvatarConfig used by the built-in message row.

Example:

Dart

const BubbleConfig(
  sentStyle: MessageStyleConfig(
    backgroundColor: Color(0xFF147BFF),
    textColor: Colors.white,
    textStyle: TextStyle(fontSize: 16),
  ),
  receivedStyle: MessageStyleConfig(
    backgroundColor: Colors.white,
    textColor: Color(0xFF111111),
  ),
  borderRadius: 16,
)

MessageStyleConfig

Fields:

• backgroundColor: bubble background color.
• textColor: default text color used by built-in text content.
• textStyle: optional text style override.

ChatAvatarConfig

Fields:

• size: avatar size.
• shape: ChatAvatarShape.circle, roundedRectangle, or square.
• borderRadius: custom radius used when shape is roundedRectangle.
• backgroundColor: fallback avatar background color.
• textStyle: fallback avatar text style.

Example:

Dart

const BubbleConfig(
  avatarConfig: ChatAvatarConfig(
    size: 40,
    shape: ChatAvatarShape.roundedRectangle,
    borderRadius: BorderRadius.all(Radius.circular(10)),
  ),
)

When to Use Builders

Use custom message bubble builders when you need a different widget for a specific MessageType. The builder is a callback entry point for the message content area; it is not an inheritance contract for internal bubble classes.