Flutter Project Base

Setting up your Flutter project environment with Monday Hero

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 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, or you can manually install the dependencies yourself.