Flutter: internationalization tutorials: Part 2 — intl and arb approaches

Let’s make internationalization in Dart way

In the first part, you have known how to use JSON resources for internationalization in Flutter. In this part, we will try to use some specific libraries of Dart to implement internationalization.

In this approach, we will use intl package and the resources is not JSON files anymore but .arb files

Intl package and .arb

intl package is an old library to use for international. But what about .arb. Well, it’s a not famous format file of Google to store translations. It can be used with Google Translator Toolkit to manage translation at the team level.

Our final structure will be like this:

Let’s begin with installing some libraries:

Notice that unlike the first approach, we don’t need to link assets.

At the begin please make sure both folder assets/i18n and lib/initialize_i18n are empty since we will generate them by code.

But at first, let create localizations.dart:

Then open the terminal and run this code:

flutter pub pub run intl_translation:extract_to_arb — output-dir=assets/i18n lib/localizations.dart

This will create assets/i18n/intl_messages.arb file which contains the base translation of “greetTo” and “hello”

Then clone intl_messages.arb to other intl_[locale].arb you want and start to translate. For example intl_en.arb and intl_fr.arb:

After we have .arb file finished with translation, let’s convert .arb file to Dart code, by running this code in the terminal:

flutter pub pub run intl_translation:generate_from_arb --output-dir=lib/initialize_i18n  --no-use-deferred-loading lib/localizations.dart assets/i18n/intl_*.arb

Now, you will have all 4 generated files in lib/initialize_i18n folder, and we have file messages_all.dart, which unifies all other files, to use in localizations.dart

The final part, let’s link all parts together in main.dart:

Well, you can see, except for loadJSON, everything in main.dart in part 2 stays the same as part 1 :D

Similar to the JSON approach, this approach has some cons and pros:

Pros

• You have many more options to format translation string than the JSON approach (for date-time, number, …)

Cons

• If you want to add new or update translations, you have to write translations instruction in localizations.dart then generate to .arb file, then translate, then generate back to .dart file. This repeat will make us bored to dead

You can find the full source code here

If this approach does not satisfy you, you may want to try with JSON and Android Studio plugin approaches in Part 1 and Part 3 respectively.

Hope you find this benefit you, and I’m happy to receive your feedback and some claps may make me proud too :D

Thanks for reading!