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/

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.

---

pubspec.yaml Configuration

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

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

UI Kit Builder Settings

Configure feature toggles and behavior.

Customizations

Modify component props, styling, and behavior.

Theming

Customize colors, typography, and styling.

Components

Explore available UI components.