> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Directory Structure

> Overview of the CometChat UI Kit Builder directory layout for Flutter — understand where to find and customize components, settings, and styles.

The UI Kit Builder for Flutter organizes code into a modular structure with the `chat_builder` package containing all Builder-specific code. This guide helps you navigate the structure so you know exactly where to make changes.

```
your_app/
├── lib/                           # Your app's Dart code
├── assets/
│   ├── fonts/                     # Font files (TTF, OTF)
│   ├── sample_app/                # Sample app assets
│   └── cometchat-builder-settings.json  # Builder configuration
├── chat_builder/
│   ├── lib/
│   │   ├── screens/               # UI screens
│   │   ├── utils/                 # Utilities and helpers
│   │   ├── widgets/               # Reusable widgets
│   │   └── chat_builder.dart      # Main entry point
│   └── pubspec.yaml               # Builder dependencies
├── ios/                           # iOS native code
├── android/                       # Android native code
└── pubspec.yaml                   # App dependencies
```

***

## Root Files

| File            | Purpose                                             |
| --------------- | --------------------------------------------------- |
| `pubspec.yaml`  | Project dependencies, assets, and font declarations |
| `lib/main.dart` | Main application entry point                        |

***

## Key Folders

### `chat_builder/`

The Builder module containing all UI Kit Builder functionality.

```
chat_builder/
├── lib/
│   ├── screens/           # UI screens (home, messages, login)
│   ├── utils/             # Utilities including BuilderSettingsHelper
│   ├── widgets/           # Reusable UI widgets
│   └── chat_builder.dart  # Main entry point with ChatBuilder class
└── pubspec.yaml           # Module dependencies
```

### `chat_builder/lib/utils/`

Utility classes and helpers.

```
utils/
├── builder_settings_helper.dart   # Loads and provides access to Builder settings
├── app_constants.dart             # CometChat credentials and constants
└── theme_helper.dart              # Theme utilities
```

| File                           | Purpose                                                       |
| ------------------------------ | ------------------------------------------------------------- |
| `builder_settings_helper.dart` | Loads configuration from JSON and provides access to settings |
| `app_constants.dart`           | CometChat APP\_ID, AUTH\_KEY, REGION                          |
| `theme_helper.dart`            | Helper functions for applying Builder theme                   |

### `chat_builder/lib/screens/`

UI screens for different features.

```
screens/
├── home/       # Home screen with tab navigation
├── messages/   # Chat and messaging screens
├── calls/      # Call logs and call screens
├── users/      # User list and profiles
├── groups/     # Group list and management
└── login/      # Authentication screens
```

### `chat_builder/lib/widgets/`

Reusable UI widgets.

```
widgets/
├── message_composer.dart      # Message input widget
├── message_list.dart          # Message list widget
├── user_avatar.dart           # User avatar widget
└── presence_indicator.dart    # Online status indicator
```

***

## Assets Directory

Static assets including configuration, fonts, and images.

```
assets/
├── fonts/
│   ├── arial_regular.ttf
│   ├── arial_medium.ttf
│   ├── arial_bold.ttf
│   ├── inter_regular.otf
│   ├── inter_medium.otf
│   ├── inter_bold.otf
│   ├── roboto_regular.ttf
│   ├── roboto_medium.ttf
│   ├── roboto_bold.ttf
│   ├── times_new_roman_regular.ttf
│   ├── times_new_roman_medium.otf
│   └── times_new_roman_bold.otf
├── sample_app/                        # Sample app specific assets
└── cometchat-builder-settings.json    # Builder configuration file
```

***

## Platform Directories

### `ios/`

iOS-specific native code and configuration.

```
ios/
├── Runner/
│   ├── AppDelegate.swift    # iOS app delegate
│   └── Info.plist           # iOS app configuration
└── Podfile                  # CocoaPods dependencies
```

### `android/`

Android-specific native code and configuration.

```
android/
├── app/
│   ├── src/main/
│   │   ├── AndroidManifest.xml   # Android app manifest
│   │   ├── kotlin/               # Native Android code
│   │   └── res/                  # Android resources
│   └── build.gradle.kts          # App-level Gradle config
├── build.gradle.kts              # Project-level Gradle config
└── settings.gradle.kts           # Gradle settings
```

***

## Quick Reference: Where to Customize

| What you want to change         | Where to look                                         |
| ------------------------------- | ----------------------------------------------------- |
| Enable/disable features         | `assets/cometchat-builder-settings.json`              |
| Access configuration at runtime | `chat_builder/lib/utils/builder_settings_helper.dart` |
| CometChat credentials           | `chat_builder/lib/utils/app_constants.dart`           |
| Theme colors & styles           | `lib/main.dart` (MaterialApp theme)                   |
| Custom fonts                    | `assets/fonts/`, `pubspec.yaml`                       |
| Chat UI screens                 | `chat_builder/lib/screens/messages/`                  |
| Call UI screens                 | `chat_builder/lib/screens/calls/`                     |
| User management UI              | `chat_builder/lib/screens/users/`                     |
| Group management UI             | `chat_builder/lib/screens/groups/`                    |
| Reusable widgets                | `chat_builder/lib/widgets/`                           |

<Note>
  Prefer using `cometchat-builder-settings.json` for feature toggles and the MaterialApp theme for styling. For extensive changes, create new widgets rather than modifying core files directly.
</Note>

***

## pubspec.yaml Configuration

Ensure your `pubspec.yaml` includes the Builder module and assets:

```yaml theme={null}
dependencies:
  flutter:
    sdk: flutter
  chat_builder:
    path: ./chat_builder

flutter:
  uses-material-design: true
  assets:
    - assets/
    - assets/sample_app/
  fonts:
    - family: arial
      fonts:
        - asset: assets/fonts/arial_regular.ttf
        - asset: assets/fonts/arial_medium.ttf
        - asset: assets/fonts/arial_bold.ttf
    - family: inter
      fonts:
        - asset: assets/fonts/inter_regular.otf
        - asset: assets/fonts/inter_medium.otf
        - asset: assets/fonts/inter_bold.otf
    - family: roboto
      fonts:
        - asset: assets/fonts/roboto_regular.ttf
        - asset: assets/fonts/roboto_medium.ttf
        - asset: assets/fonts/roboto_bold.ttf
    - family: times New Roman
      fonts:
        - asset: assets/fonts/times_new_roman_regular.ttf
        - asset: assets/fonts/times_new_roman_medium.otf
        - asset: assets/fonts/times_new_roman_bold.otf
```

***

## Next Steps

<CardGroup cols={2}>
  <Card title="UI Kit Builder Settings" href="/chat-builder/flutter/builder-settings">
    Configure feature toggles and behavior.
  </Card>

  <Card title="Customizations" href="/chat-builder/flutter/builder-customisations">
    Modify component props, styling, and behavior.
  </Card>

  <Card title="Theming" href="/ui-kit/flutter/theme-introduction">
    Customize colors, typography, and styling.
  </Card>

  <Card title="Components" href="/ui-kit/flutter/components-overview">
    Explore available UI components.
  </Card>
</CardGroup>