Monday Hero Starter Project

Starter project description ......................

Project Documentation

Documentation

Features

.........

Getting Started

Welcome to the Monday Hero Starter Project documentation!

System Requirements

flutter sdk version must 2.0.0 or later.
dart sdk version must be 2.12.0 or later.

If the required SDKs are not installed, you can install them from the docs.flutter.dev

Installation

Step 1: Clone the repository

https://github.com/mondayhero-support/mondayhero-starter-project.git

Step 2:

Go to project root and execute the following command in console to get the required dependencies:

flutter pub get

Step 3: Build & Run the project

flutter run lib/main.dart

Directory Structure

├── mondayhero-starter-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.

Theming

Colors
Text Styles

Colors

The colors generated by MondayHero are in the MHGeneratedColors (lib/theme/mh_generated/mh_app_colors.dart) class. Use AppColors (lib/theme/app_colors.dart) class to use and change colors.

Using Colors:

Step 1: import àpp_colors.dart

import 'package:mondayhero_starter_project/theme/app_colors.dart';

Step 2: Use appColors static instance for accessing colors.

Container(color: appColors.{colorName})

Update Generated Colors:

Step 1: Override generated color in the AppColors class.

class AppColors extends MHAppColors {
  @override
  Color get anchor => const Color(0xFFFFAAFF);
}

The text styles generated by MondayHero are in the MHGeneratedTextStyles (lib/theme/mh_generated/mh_app_text_styles.dart) class. Use AppTextStyles (lib/theme/app_text_styles.dart) class to use and change text styles.

Using Text Styles:

Step 1: import app_text_styles.dart

import 'package:mondayhero_starter_project/theme/app_text_styles.dart';

Step 2: Use appTextStyles static instance for accessing colors.

Text('Monday Hero', style: appTextStyles.{styleName})

Update Generated Text Styles:

Step 1: Override generated text style in the AppTextStyles class.

class AppTextStyles extends MHAppTextStyles {
  @override
  TextStyle textStyle({Color? color}) => TextStyle(fontSize: 21.0, color: color);
}

Customize Project

Localization (i18n)

The localization package (easy_localization) is installed in the starter project. By default, en-US locale is set.

Add New Translation

Step 1: Go to assets/translations folder and duplicate en-US.json and rename as below.

assets
└── translations
    ├── en-US.json  
    ├── {languageCode}.{ext}                  // only language code, without curly braces
    └── {languageCode}-{countryCode}.{ext}    // or full locale code, without curly braces

Step 2: Go to main.dart file and add new locale to supported locales array.

runApp(
    EasyLocalization(
      supportedLocales: const [
        Locale('en', 'US'),
        Locale('{languageCode}'),                // only language code, without curly braces
        Locale('{languageCode}', '{countryCode}'), // or full locale code, without curly braces
      ],
      path: 'assets/translations',
      assetLoader: const MHLocalizationAssetLoader(),
      fallbackLocale: const Locale('en', 'US'),
      child: const MyApp(),
    ),
  );

Localization Usage

Example translation file: en-US.json

{
  "title": "Monday Hero",
  "login": "Login",
  (...)
}

Step 1: import localization package.

import 'package:easy_localization/easy_localization.dart';

Text('title'.tr()) // Output: "Monday Hero"

mondayhero/flutter-components-show-case