# Flutter Project Base

Before you begin working with the Flutter code generated by Monday Hero, it's important to set up your development environment. Below, we outline the necessary dependencies and how to configure everything.

### Setting Up the Development Environment

To build Flutter apps, ensure that you have the following dependencies installed:

* Flutter SDK version 2.0.0 or later
* Dart SDK version 2.12.0 or later

If you haven't already, refer to  [Flutter's official documentation](https://docs.flutter.dev) for instructions on setting up your project environment.

### Monday Hero Directory Structure

In Monday Hero, the folder structure of a Flutter project typically looks like this:

```
├── mondayhero_project
   ├── assets
   │   ├── fonts                          # Fonts directory (.otf, .ttf)
   │   │   ├── **.otf
   │   │   ├── **.ttf
   │   │   └─── ...
   │   │
   │   ├── images                         # Images directory (.svg, .png, .jpg)
   │   └── translations
   │       ├── en-US.json                 # English translation (.json)
   │       └── mh_generated               # Monday Hero Generated translations directory
   │           └── en-US.json
   ├── lib
   │   ├── core
   │   │   └── localization
   │   │       └── mh_localization_asset_loader.dart
   │   │
   │   ├── design-system
   │   │   └── components                  # Created custom components
   │   │       └─── ...
   │   │
   │   ├── route
   │   │   └── app_router.dart
   │   │   └── app_routes.dart                  
   │   │
   │   ├── main.dart                       # App start
   │   │
   │   └── theme                           # App theme configuration directory
   │       ├── app_colors.dart
   │       ├── app_text_styles.dart
   │       └── mh_generated                # Monday Hero Generated theme files
   │           ├── mh_app_colors.dart      # Colors used in the design document
   │           └── mh_app_text_styles.dart # Text styles used in the design document
   │
   └── pubspec.yaml                        # Includes project name, version, environment, dependencies, assets path, fonts etc.
```

* **mondayhero\_project**: Root directory of the Flutter project.
  * **assets**: Contains static assets used in the app, such as fonts, images, and translations.
    * **fonts**: Directory for font files (.otf, .ttf) used in the app.
    * **images**: Directory for image files (.svg, .png, .jpg) used in the app.
    * **translations**: Directory for localization files (.json) providing translations for different languages.
      * **en-US.json**: English translation file.
      * **mh\_generated**: Monday Hero Generated translations directory.
        * **en-US.json**: Automatically generated translation file.
  * **lib**: Contains Dart source code files for the Flutter project.
    * **core**: Core functionality of the app.
      * **localization**: Directory for localization-related files.
        * **mh\_localization\_asset\_loader.dart**: Asset loader for localization.
    * **design-system**: Houses custom components created for the app.
      * **components**: Directory for custom UI components.
    * **route**: Handles app routing and navigation.
      * **app\_router.dart**: Defines the app router.
      * **app\_routes.dart**: Contains route definitions.
    * **main.dart**: Entry point of the app.
    * **theme**: Contains app theme configuration files.
      * **app\_colors.dart**: Defines the app color scheme.
      * **app\_text\_styles.dart**: Defines text styles used throughout the app.
      * **mh\_generated**: Monday Hero Generated theme files.
        * **mh\_app\_colors.dart**: Automatically generated color definitions.
        * **mh\_app\_text\_styles.dart**: Automatically generated text styles.
* **pubspec.yaml**: YAML file specifying project dependencies and metadata for the Flutter project.

You have two options for setting up your project: you can sync the code directly into [a project provided by Monday Hero](/design-to-flutter/flutter-project-base/fast-start-with-monday-hero-starter-project.md), or you can [manually install the dependencies ](/design-to-flutter/flutter-project-base/integrate-monday-hero-to-your-existing-project.md)yourself.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://learn.mondayhero.io/design-to-flutter/flutter-project-base.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.