How to i18n

Because the ÉTS is a university in Canada we support both English and French languages.

For the internationalizing into the application, we decided to use the recommended way by the Flutter team, you can see more using this link.

The arb files contain all the text used by the application and can be found under the lib/l10n folder. These files are simple json files.

Add a text

To add a simple text, follow this format:

{
 "message_title": "YOUR MESSAGE"
}

⚠️ Please don't forget to add the french version of your text. ⚠️

If your text can be personalized for example "Welcome NAME_OF_THE_USER", use this format:

{
 "message_title": "YOUR MESSAGE {parameter}",
 "@message_title": {
  "placeholders": {
    "parameter": {}
  }
 }
}

⚠️ Please don't forget to add the french version of your text. ⚠️

Generate classes used for the internalization

Nothing more simple! Just run:

flutter pub get

And that is all! Go check under .dart_tool/flutter_gen/gen_l10n/ if you see some dart classes.

Use one of the translated text

To use the text you just add or one of the other text already translated, you need to use the AppIntl class. You can find an example to get the value of title_dashboard:

import 'package:flutter_gen/gen_l10n/app_localizations.dart'

class ExampleLocalizedWidget extends StatelessWidget {
    @override
    Widget build(BuildContext context) => Text(AppIntl.of(context).title_dashboard);
}

If you need to access the AppIntl from the core folder, you will need to bring AppIntl from the UI side, for an example you can check LoginViewModel (here)

Use a placeholder function

To use a field with a placeholder, you will see that your AppIntl.of(context) will contain a definition for a function where you can pass one or many Object parameter (that will be read as a string).

import 'package:flutter_gen/gen_l10n/app_localizations.dart'

class ExampleLocalizedWidget extends StatelessWidget {
    @override
    Widget build(BuildContext context) => Text(AppIntl.of(context).message_title('Here is my message'));
    // When the app is set in english this will render as: YOUR MESSAGE Here is my message
}