Directory Structure - CometChat Docs

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.

​Root Files

​Key Folders

​chat_builder/

​chat_builder/lib/utils/

​chat_builder/lib/screens/

​chat_builder/lib/widgets/

​Assets Directory

​Platform Directories

​ios/

​android/

​Quick Reference: Where to Customize

​pubspec.yaml Configuration

​Next Steps

UI Kit Builder Settings

Customizations

Theming

Components

Root Files

Key Folders

`chat_builder/`

`chat_builder/lib/utils/`

`chat_builder/lib/screens/`

`chat_builder/lib/widgets/`

Assets Directory

Platform Directories

`ios/`

`android/`

Quick Reference: Where to Customize

pubspec.yaml Configuration

Next Steps