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.

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 UI Kit Builder functionality.

chat_builder/lib/utils/

Utility classes and helpers.
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.

chat_builder/lib/widgets/

Reusable UI widgets.

Assets Directory

Static assets including configuration, fonts, and images.

Platform Directories

ios/

iOS-specific native code and configuration.

android/

Android-specific native code and configuration.

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:

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.