Skip to content

Brands Overview

Malek Kamel edited this page Sep 26, 2024 · 8 revisions

Here's a detailed description of each element in the provided directory structure for the solara project:

Directory Structure Overview


Diagram


Elements Breakdown

solara/

This is the root directory for Solara.

brand/

Contains all the brand-specific configurations and resources.

global/

This directory holds configurations or resources that are applicable across all brands.

  • fonts/: A folder designated for global font files used by multiple brands.

For full documentation, check the Solara Fonts section.

brands/

This directory contains configuration files and assets specific to each brand.

  • current_brand.json: Stores the data of the currently selected brand, which assists in internal management within Solara.

  • brands.json: A list of all brands with their unique keys and names. Each brand is defined by:

    • key: A unique identifier for each brand, used in commands and configurations.
    • name: A human-readable name for the brand used within the Solara context.
brand1/

This subdirectory contains all configurations and assets related to a specific brand identified by its key (in this case, brand1).

  • android/: Contains Android-specific configurations and resources.

    • assets/: Holds miscellaneous assets for the Android app.
    • res/: Contains Android resource files (e.g., images, layouts).
    • android_config.json: Basic configuration settings for the Android app, including:
      • packageName: The unique package identifier for the app.
      • versionName: The version displayed to users.
      • versionCode: The internal version code used by the system.
      • sourceSets: A list of source sets used in the project.
    • android_signing.json: Configuration for code signing, which includes:
      • storeFile: Path to the keystore file.
      • keyAlias: Alias for the key within the keystore.
      • storePassword: Password for the keystore.
      • keyPassword: Password for the key.
  • ios/: Contains iOS-specific configurations and resources.

    • assets/: Holds miscellaneous assets for the iOS app. Designed to hold any specific files you need to customize.
    • xcassets/: Holds iOS assets such as app icons and launch images.
    • ios_config.json: Basic configuration settings for the iOS app, including:
      • PRODUCT_BUNDLE_IDENTIFIER: Unique identifier for the app.
      • MARKETING_VERSION: User-facing version number.
      • BUNDLE_VERSION: Build version number.
      • APL_MRCH_ID: Marketing identifier.
    • ios_signing.json: Configuration for iOS code signing, similar to Android signing.
  • flutter/: Contains Flutter-specific configurations and resources.

    • assets/: Holds miscellaneous assets for the Flutter app.
  • shared/: Contains configurations and assets that may be shared across platforms.

    • brand_config.json: Central hub for brand-specific settings that can include various parameters and configurations.
    • theme.json: Defines the brand's color scheme for light and dark themes, including primary and error colors.

Brand Name Localization Guide

The brand name is the name displayed to users, such as the app name on iOS and Android. You can specify the brand name in brand_config.json as follows:

{
    "brandName": "BRAND_NAME_HERE"
}

This serves as the default name. To localize it, follow the platform-specific instructions below.

iOS Brand Name Localization

To localize the brand name in iOS:

  1. Switch to the desired brand.
  2. Open your Xcode project and navigate to InfoPlist.xcstrings.
  3. Add your desired localizations for CFBundleDisplayName.
  4. After editing, copy InfoPlist.xcstrings to the appropriate directory in solara/brand/brands.

Note: The default language of CFBundleDisplayName is overridden by the name specified in brand_config.json. Other localizations should only be added in InfoPlist.xcstrings.

For comprehensive guidance on Xcode String Catalog, refer to the iOS Localization Documentation.

Android Brand Name Localization

To localize the brand name for Android:

  1. Navigate to solara/brand/brands/BRAND_KEY/android/res/.
  2. Add the desired localization under the values directory. For example, to localize the name into Arabic, create a folder named values-ar and add your localized strings.xml file there.

For detailed information on Android localization, please check the Localize your app documentation.

Solara Fonts Guide

The font files are located in solara/brand/brands/BRAND_KEY/global/fonts. When switching brands, the fonts are transferred to the appropriate destinations based on the project. The diagram below illustrates the final destinations for each project:


Diagram


Flutter Fonts

The Flutter fonts are transferred to the ./assets/solara_fonts/ directory, and the files are automatically referenced in pubspec.yml.

Android Fonts

The Android fonts are transferred to the ./app/src/main/solara_artifacts/font/ directory. The files are renamed to lower snake case format to comply with Android resource guidelines. For example, Inter-Light.ttf is renamed to inter_light.ttf. You can then reference the font as R.font.inter_light.

iOS Fonts

The iOS fonts are transferred to the SolaraArtifacts/Fonts/ directory, and the files are automatically referenced in Info.plist.


Summary

This structure allows for efficient management of multiple brands within a single project, making it easy to switch between brands and customize configurations for different platforms (Flutter, iOS, Android, and Web). Each brand's settings and assets are organized methodically, ensuring clarity and accessibility.