4. Project Structure

Understanding the project structure is essential for navigating and customizing the app effectively. Below is a simplified tree structure of the project, focusing on the key directories and files.

lib/
├── app/                  # Core application logic, data models, repositories, and pages.
│   ├── core/             # Core utilities: helpers, static configs, styles, themes, and types.
│   ├── data/             # Data layer: models and repositories for API communication.
│   ├── middlewares/      # Middleware logic (e.g., authentication checks).
│   ├── pages/            # Screens/pages of the app, organized by feature (auth, common, landlord, tenant).
│   ├── routes/           # Routing configuration for navigation.
│   ├── services/         # Shared services (API client, global listeners, localization, etc.).
│   └── widgets/          # Reusable custom widgets used across the app.

assets/                   # Static assets like images, icons, JSON files, and shapes.
│   ├── app/              # App-specific assets (icons, splash screen, background images).
│   ├── icons/            # Icons used throughout the app (e.g., payment, room features).
│   ├── images/           # Images, including onboarding screen visuals.
│   ├── json/             # JSON files for static data (e.g., country lists).
│   └── shapes/           # Shape assets (placeholders, loading spinners, error messages).

i18n/                     # Localization files for translations (e.g., en.i18n.json, fr.i18n.json).

dev_tool/                 # Development tools and scripts (e.g., customization scripts).

main.dart                 # Entry point of the Flutter application.
pubspec.yaml              # Configuration file for dependencies and assets.
customization.yaml        # Contains easy customization configuration (Detailed in step 5).

---

4.1 Overview of the Project Directory

The project is organized into two main directories:

• /assets: Contains static assets like images, icons, JSON files, and shapes.
• /lib: Contains the main source code of the app.

Each directory and file has a specific purpose, making it easier to locate and modify components as needed.

---

4.2 Key Folders and Their Purpose

/assets

This folder contains all static assets used in the app. Below are its subfolders and their purposes:

• /app: App-specific assets such as app icons, splash screens, and background images.
  • Example files:
    • app_icon.png: The app launcher icon.
    • app_splash_icon.png: The splash screen logo.
    • support_avatar.jpeg: Placeholder avatar for support-related features.
• /icons: Icons used throughout the app.
  • Example files:
    • bed_room_icon.png, bath_room_icon.png: Icons for property features.
    • online_payment.png, offline_payment.png: Payment-related icons.
• /images/onboard: Images used in the onboarding screens.
  • Example files:
    • onboard_01.png, onboard_02.png, onboard_03.png.
• /json: JSON files containing data such as country lists.
  • Example file:
    • countries.json.
• /shapes: Shape assets like placeholders, loading spinners, and error messages.
  • Example files:
    • loading_spinner.png, no_internet.png.

/lib

This folder contains the app's source code, organized into subfolders for better modularity. Below are the key subfolders:

• /app/core: Core functionality of the app.
  • /static/api_config: API configuration files.
    • _api_config.dart: File to configure the backend domain URL.
  • /static/app_config: App configuration files.
    • _app_config.dart: File to configure app name, package name, etc.
  • /theme: Global theme definitions.
    • _app_colors.dart: File to define primary and secondary colors.
  • /styles: Reusable styles for buttons, text fields, etc.
• /app/data: Data models and repositories.
  • Example subfolders:
    • /models: Data models for API responses.
    • /repositories: Repositories for handling API calls.
• /app/pages: Screens and views of the app.
  • Example subfolders:
    • /auth: Authentication-related screens (e.g., login, signup).
    • /common: Common screens like notifications and settings.
    • /landlord: Screens specific to landlords.
    • /tenant: Screens specific to tenants.
• /app/widgets: Custom widgets used across the app.
  • Example widgets:
    • _custom_pi_chart.dart: A reusable pie chart widget.
    • _image_preview_gallery.dart: A gallery for previewing images.
• /i18n: Localization files for translations.
  • Example files:
    • en.i18n.json: English translations.
    • es.i18n.json: Spanish translations.

---

4.3 Key Files and Their Purpose

Below are some of the most important files in the project:

• _api_config.dart:

  • Path: /lib/app/core/static/api_config/_api_config.dart
  • Purpose: Configure the backend domain URL.
  • Example:

    const String baseUrl = 'https://yourdomain.com/';

• _app_config.dart:

  • Path: /lib/app/core/static/app_config/_app_config.dart
  • Purpose: Configure app-specific settings like app name and package name.
  • Example:

    const String appName = 'Rent Pro';
    const String packageName = 'com.acnoo.realestate';

• _app_colors.dart:

  • Path: /lib/app/core/theme/_app_colors.dart
  • Purpose: Define global color themes.
  • Example:

    const Color kMainColor = Color(0xFFYourHexCode);

• Localization Files:

  • Path: /lib/i18n/
  • Purpose: Manage translations for different languages.
  • Example:

    {
      "helloWorld": "Hello, World!"
    }

---

4.4 How to Navigate the Project

To locate files for customization:

1. Use the folder names to identify screens, widgets, and configurations.
   • Example: To modify the login screen, navigate to /lib/app/pages/auth/sign_in.
2. Refer to the file names for specific functionalities.
   • Example: To change the app theme, open _app_colors.dart in /lib/app/core/theme.

---

4.5 Additional Notes

• The project is modular, making it easier to manage and customize.
• Always ensure that changes to critical files (e.g., _app_config.dart) are tested thoroughly.
• If you’re unsure about a file’s purpose, refer to its folder name or consult the documentation.

Great! Let’s incorporate the Onboarding Customization section into Step 5: Customizing the App, and also refine the localization steps to include updating translation keys. I'll structure it clearly so users can easily follow the instructions.