Customization Overview - CometChat Docs

Every component in the Flutter UI Kit follows a layered architecture built on BLoC for state management and declarative widget composition. Understanding these layers is the key to unlocking deep customization without rebuilding components from scratch.

Architecture

Each component is composed of collaborating layers:

Layer	Role	Example Class
Widget	Renders the UI, accepts configuration props, and exposes builder callbacks for customization.	`CometChatConversations`
BLoC	Manages data fetching, state transitions, and business logic via streams and events.	`ConversationsBloc`
Templates	Define how each message type is rendered as a bubble (message list only).	`CometChatMessageTemplate`

┌─────────────────────────────────┐
│   CometChatConversations        │
│   (Widget Layer)                │
│                                 │
│   ┌───────────────────────┐     │
│   │  ConversationsBloc    │     │
│   │  (State Management)   │     │
│   └───────────────────────┘     │
│                                 │
│   ┌───────────────────────┐     │
│   │  Builder Callbacks    │     │
│   │  (View Customization) │     │
│   └───────────────────────┘     │
└─────────────────────────────────┘

Accessing Internal Layers

Components expose their BLoC via constructor parameters:

Dart

// Provide a custom BLoC instance
CometChatConversations(
  conversationsBloc: myCustomConversationsBloc,
)

// Or use the stateCallBack to access the controller
CometChatMessageList(
  user: user,
  stateCallBack: (controller) {
    // Access the controller for programmatic operations
  },
)

Customization Categories

The UI Kit provides seven categories of customization entry points. Each category has a dedicated guide:

View Slots

Replace specific regions of a component’s UI (leading view, title, subtitle, trailing view) using builder callbacks.

Styles

Customize visual appearance using ThemeData extensions or component-level style objects.

BLoC & Data

Configure data fetching with RequestBuilders, provide custom BLoC instances, override repositories and datasources.

State Views

Replace the default empty, error, and loading state views with custom widgets.

Text Formatters

Create custom text processors for hashtags, mentions, links, or any pattern using the CometChatTextFormatter API.

Menu & Options

Add, replace, or extend long-press actions and composer attachment options on components.

Message Templates

Customize how messages are rendered using MessageTemplateUtils — the central registry for message templates, options, and formatters.

What’s Next

If you’re new to customization, start with View Slots for quick UI changes, or Styles to match your brand. For advanced use cases like custom message types or global behavior changes, head to Message Templates.

​Architecture

​Accessing Internal Layers

​Customization Categories