Manual Installation

Integrate Monday Hero to your existing project manually.

If you already have a Flutter project, you can integrate it into the Monday Hero by installing the dependencies manually to your workspace.

After you complete the instructions on this page, use the sync function as explained on the next page. Monday Hero will create the missing folders/files automatically.

Setting Up The Localization Requirements

MHLocalizationAssetLoader is a must custom asset loader to be able to manage app-specific localization files, Monday Hero generated localization files, and merge these files as a bundle. This way, translation files both under assets/translations and assets/translations/mh_generated can be used in the app and managed separately.

Step 1: Add the 'easy_localization' package in your pubspec.yaml and complete installation by executing the following command in your project root. Check out the package documentation for more.

flutter pub add easy_localization

Step 2: Declare your asset's directories in pubspec.yaml.

assets:
    #Localization Files
    - assets/translations/
    # Localization Files generated by Monday Hero
    - assets/translations/mh_generated/
    - assets/images/

Step 3: Go to the file in which your project's main() function is located. It's the main.dart file by default. Add the following imports:

import 'package:easy_localization/easy_localization.dart';
import 'core/localization/mh_localization_asset_loader.dart';

Step 4: Call 'await EasyLocalization.ensureInitialized();' in your main function.

  • Set the path as 'assets/translations'

  • Set assetLoader as const MHLocalizationAssetLoader()

  • Set child as your app instance.

Sample Configuration:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await EasyLocalization.ensureInitialized();
  runApp(
    EasyLocalization(
      supportedLocales: const [
        Locale('en', 'US'),
      ],
      path: 'assets/translations',
      assetLoader: const MHLocalizationAssetLoader(),
      fallbackLocale: const Locale('en', 'US'),
      child: const MyApp(),
    ),
  );
}

Setting Up The App Router

Flutter has an idiomatic declarative routing mechanism which is similar to build methods as used with widgets. To use this mechanism in your projects with Monday Hero, you need to arrange your app definition from MaterialApp() widget.

Step 1: Go to your app definition and delete the home value if your app has one.

Step 2: Set initialRoute and onGenerateRoute as follows:

MaterialApp(
   // ...
   initialRoute: AppRoutes.init,
   onGenerateRoute: (settings) => AppRouter.generateRoute(settings),
   // ...
    )

You're all set! Next, sync the project with your local directory to get the missing folders and files.

Last updated