> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Customization Overview

> Understand the Widget + BLoC + Template architecture and discover all customization entry points in the CometChat Flutter UI Kit.

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:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    // 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
      },
    )
    ```
  </Tab>
</Tabs>

## Customization Categories

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

<CardGroup cols={2}>
  <Card title="View Slots" href="/ui-kit/flutter/customization-view-slots">
    Replace specific regions of a component's UI (leading view, title, subtitle, trailing view) using builder callbacks.
  </Card>

  <Card title="Styles" href="/ui-kit/flutter/component-styling">
    Customize visual appearance using ThemeData extensions or component-level style objects.
  </Card>

  <Card title="BLoC & Data" href="/ui-kit/flutter/customization-bloc-data">
    Configure data fetching with RequestBuilders, provide custom BLoC instances, override repositories and datasources.
  </Card>

  <Card title="State Views" href="/ui-kit/flutter/customization-state-views">
    Replace the default empty, error, and loading state views with custom widgets.
  </Card>

  <Card title="Text Formatters" href="/ui-kit/flutter/customization-text-formatters">
    Create custom text processors for hashtags, mentions, links, or any pattern using the CometChatTextFormatter API.
  </Card>

  <Card title="Menu & Options" href="/ui-kit/flutter/customization-menu-options">
    Add, replace, or extend long-press actions and composer attachment options on components.
  </Card>

  <Card title="Message Templates" href="/ui-kit/flutter/customization-datasource">
    Customize how messages are rendered using MessageTemplateUtils — the central registry for message templates, options, and formatters.
  </Card>
</CardGroup>

## What's Next

If you're new to customization, start with [View Slots](/ui-kit/flutter/customization-view-slots) for quick UI changes, or [Styles](/ui-kit/flutter/component-styling) to match your brand. For advanced use cases like custom message types or global behavior changes, head to [Message Templates](/ui-kit/flutter/customization-datasource).