Skip to main content
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

FilePurpose
pubspec.yamlProject dependencies, assets, and font declarations
lib/main.dartMain application entry point

​
Key Folders

​
chat_builder/

The Builder module containing all CometChat 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
FilePurpose
builder_settings_helper.dartLoads configuration from JSON and provides access to settings
app_constants.dartCometChat APP_ID, AUTH_KEY, REGION
theme_helper.dartHelper 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 changeWhere to look
Enable/disable featuresassets/cometchat-builder-settings.json
Access configuration at runtimechat_builder/lib/utils/builder_settings_helper.dart
CometChat credentialschat_builder/lib/utils/app_constants.dart
Theme colors & styleslib/main.dart (MaterialApp theme)
Custom fontsassets/fonts/, pubspec.yaml
Chat UI screenschat_builder/lib/screens/messages/
Call UI screenschat_builder/lib/screens/calls/
User management UIchat_builder/lib/screens/users/
Group management UIchat_builder/lib/screens/groups/
Reusable widgetschat_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.