5. Customizing the App

This section explains how to customize your app using the provided script and manual steps for specific customizations.

---

5.1 Recommended: Enable the RPS Package Globally

The RPS (Run Pub Script) package allows you to run Dart scripts globally without needing to specify the full path. To enable it:

1. Open a terminal and run the following command to activate the RPS package globally:

   dart pub global activate rps

2. After activation, you can run any Dart script in the project using the rps command.

   Example:

   rps customize

Note: Using the RPS package is highly recommended as it simplifies script execution and avoids path-related issues.

Troubleshooting: If you encounter permission issues while activating the RPS package, ensure your system allows global installations or use sudo (on macOS/Linux) or run the terminal as an administrator (on Windows).

---

5.2 Using the Customization Script

The app includes a powerful customization script (lib/dev_tool/.customize.dart) that allows you to easily update key aspects of the app, such as the app name, package name, base URL, and app icon. Follow these steps to use the script:

Step 1: Prepare Your customization.yaml File

• Locate the customization.yaml file in the root directory of the project (e.g., customization.yaml).
• Open the file and update the following fields:

  app_name: "YourAppName"
  package_name: "com.yourcompany.yourappname"
  base_url: "https://yourdomain.com"

  • app_name: The name of your app.
  • package_name: The unique identifier for your app (e.g., com.yourcompany.yourappname).
  • base_url: The backend domain URL for API requests.

Step 2: Run the Script

• Open a terminal in the root directory of the project.
• Use the following command to run the script:

  rps customize

  This will apply all customizations (app name, package name, base URL, and app icon).

Step 3: Customize Specific Features (Optional Flags)

If you want to customize only specific features, use the following flags:

• Change Base URL Only:

  rps customize --baseUrl-only

• Change Package Name Only:

  rps customize --packageName-only

• Change App Name Only:

  rps customize --appName-only

• Change App Icon Only:

  rps customize --icon-only

Step 4: Verify Changes

• After running the script, verify the changes:

  • Restart the app to see the updated app name, package name, and base URL.
  • Ensure the app icon has been updated by checking the launcher.

  Here's a quick overview for the customize script:

  | Flag                 | Description                    |
  | -------------------- | ------------------------------ |
  | `--baseUrl-only`     | Changes only the base URL.     |
  | `--packageName-only` | Changes only the package name. |
  | `--appName-only`     | Changes only the app name.     |
  | `--icon-only`        | Changes only the app icon.     |

---

5.3 Manual Customizations

For additional customizations not covered by the script, follow the steps below:

5.3.1 Changing Onboarding Screen Content

Customizing the onboarding screens involves updating both images and text content. Follow these steps:

Step 1: Replace Onboarding Images

• Navigate to the /assets/images/onboard folder.
• Replace the existing images with your custom ones:
  • Rename your images as follows:
    • onboard_01.png
    • onboard_02.png
    • onboard_03.png
• Ensure the images are in .png format for better visual quality.
• Ensure the new images have the same dimensions as the originals to prevent layout distortions.

Step 2: Update Onboarding Text Content

• Navigate to the /lib/i18n folder.
• Open the base language file (en.i18n.json) and locate the pages.onboard.onboardData section:

  {
    "pages": {
      "onboard": {
        "onboardData": {
          "data1": {
            "title": "Find Your Property",
            "description": "We've made it a breeze to find a place that fits your life — whether it's a room, an apartment, or a house."
          },
          "data2": {
            "title": "Apartment In Town",
            "description": "We save you time by quickly matching you with the perfect property before it's gone so you can enjoy your new home, or list your own for free."
          },
          "data3": {
            "title": "Your Comfort House",
            "description": "If you're looking for a place to live then take a look at our houses for rent. We have a wide range of houses for you to choose from all over the country."
          }
        }
      }
    }
  }

• Modify the title and description fields for each data entry (data1, data2, data3) to reflect your desired content.

Step 3: Apply Localization Changes

• After updating the JSON files, run the following command to apply the changes to the localization classes:

  dart run slang

• This will update the localization class data based on the modified JSON files.

Step 4: Restart the App

• Restart the app to see the updated onboarding images and text content.

---

5.3.2 Updating Themes

• Open _app_colors.dart:
  • Path: /lib/app/core/theme/_app_colors.dart
• Modify global colors:

  const Color kMainColor = Color(0xFFYourHexCode);

• Save the file and hot-reload to see the changes.

Note: Use hot reload to see immediate changes for most updates. However, for certain changes (e.g., app name, package name), a full restart is required.

---

5.3.3 Adding or Editing Translations

To add or edit translations, follow these steps:

Step 1: Add a New Language

• Duplicate an existing .i18n.json file (e.g., en.i18n.json) and rename it to match the new language code (e.g., fr.i18n.json for French).
• Translate the strings in the new file:

  {
    "helloWorld": "Bonjour tout le monde!"
  }

Step 2: Edit Existing Translations

• Open the corresponding .i18n.json file (e.g., es.i18n.json for Spanish).
• Modify the string values:

  {
    "helloWorld": "¡Hola a todos!"
  }

Step 3: Apply Localization Changes

• Run the following command to update the localization classes:

  dart run slang

Step 4: Hot-Reload the App

• Hot-reload the app to apply the changes.

---

5.3.4 Adding or Editing Translations

The app uses slang_flutter for localization, which simplifies managing translations across multiple languages. Translations are stored in .i18n.json files located in the /lib/i18n folder. Each language has its own file (e.g., en.i18n.json for English, es.i18n.json for Spanish). Follow these steps to add or edit translations:

---

Step 1: Understanding the Localization Structure

• The app accesses localized strings using the t object, which is generated automatically by slang_flutter. For example:

  t.action.save // Accesses the "save" key under the "action" namespace.

• The structure of the .i18n.json files mirrors this access pattern. For example:

  {
    "action": {
      "save": "Save",
      "cancel": "Cancel"
    }
  }

---

Step 2: Adding a New Language

1. Duplicate an existing .i18n.json file (e.g., en.i18n.json) and rename it to match the new language code. For example:
   • For French: fr.i18n.json
   • For German: de.i18n.json
2. Translate the strings in the new file. For example:

   {
     "action": {
       "save": "Enregistrer",
       "cancel": "Annuler"
     }
   }

3. Save the file and run the following command to update the localization classes:

   dart run slang

4. Restart the app to apply the changes.

---

Step 3: Editing Existing Translations

1. Open the corresponding .i18n.json file for the language you want to edit (e.g., es.i18n.json for Spanish).
2. Modify the string values while keeping the keys unchanged. For example:

   {
     "action": {
       "save": "Guardar", // Updated translation
       "cancel": "Cancelar"
     }
   }

3. Run the following command to update the localization classes:

   dart run slang

4. Hot-reload the app to see the changes.

---

Step 4: Deleting a Language

1. Remove the .i18n.json file for the language you want to delete (e.g., fr.i18n.json for French).
2. Remove references to the language from the code:
   • If any part of the app uses keys specific to the removed language (e.g., t.action.save), replace the reference with a static string or use the default language.
   • Example:

     t.action.save // Replace with:
     "Save"

3. Run the following command to update the localization classes:

   dart run slang

4. Restart the app to apply the changes.

Troubleshooting: If translations do not appear after running dart run slang, ensure the .i18n.json file is correctly formatted and all required keys are present.

---

Step 5: Common Issues

• Missing Translations: If a translation is missing for a specific language, the app will fall back to the default language (English). Ensure that all required keys are present in every .i18n.json file.
• Key Errors: Always keep the keys consistent across all .i18n.json files. Changing a key in one file without updating others will cause runtime errors.
• Supported Locales: You can find the list of supported locales here:
  Flutter Localizations Library

---

5.4 Troubleshooting

• If the script fails, ensure that:
  • The customization.yaml file exists and is correctly formatted.
  • All required dependencies are installed (flutter pub get).
  • You have the necessary permissions to modify files.
• For errors related to package name changes, ensure the new package name follows the standard structure (e.g., com.yourcompany.yourappname).