A new approach of localization in Flutter

Using one platform manages all localization strings and run scripts to convert them into coding. I use this approach in my Android development previously. But, for flutter, I cannot find a similar solution. So, I wrote gen_lang and lang_table plugins to solve it. For handling localization, please take a look existing ways first.

Existing ways for handling localization

There exists several ways for handling localization

1) Flutter Localization (Official)

2) Flutter i18n (Plugin)

3) easy_localization

4) flutter_i18n

Flutter Localization (Official)

You can found the official article — Internation­alizing Flutter apps to learn how to implement localization in Flutter. After read it, you may not get a clear idea. Then, please take a look on Vo Thanh Dat’s Flutter: internationalization tutorials: Part 2 — intl and arb approaches. It will teach you the steps by steps.

By using Intl, you need to do these steps in summary.

1. Create a class with Intl’s syntax
2. Run intl_translation:extract_to_arb to generate arb files
3. Prepare strings in arb files
4. Run intl_translation:generate_from_arb to generate message_all.dart
5. Link with the generated code into the class with Intl’s syntax
6. Use it in coding

Too many steps to follow…

Flutter I18n plug-in

It is a Android studio plugin. I used with it very happy and thought it is the ideal solution at the early stage. Vo Thanh Dat’s Flutter: internationalization tutorials: Part 3 — Android Studio plugin teach you how to use it. But, I found that it is not stable. For example, upgrading android studio version from v3.3 to v3.4. The plugin had an internal crash. Then Android Studio always pop-up error message window. No files generated and it did not work again. As this plugin is not an official plugin, the author may not fix the issues as soon as possible. If you wanna to fix it by yourself, you need to understand how to write a plugin in Android Studio. Finally, I gave up to use it.

easy_localization

It is a Flutter package to load strings in json files in run time. The approach is good but I don’t want to take any I/O tasks for localization.

flutter_i18n

It is a flutter package with the same approach as easy_localization.

Finally, I think flutter localization is the most stable way but it takes many steps. Then I have an idea. ‘If flutter I18n plug-in combine with flutter localization, then it will save times.’

New approach for localization

By using gen_lang and lang_table plugins, a new approach for handling localization is shown below:

1. Prepare all strings in Airtable
2. Run lang_table to generate json files
3. Run gen_lang to generate i18n.dart and message_all.dart
4. Use i18n.dart for localization in coding

Prepare all strings in Airtable

You create a table on AirTable and manage all multi-language strings

Flutter_starter_kit’s Template on AirTable

Run lang_table to generate json files

lang_table helps you to convert strings stored in AirTable into several json files.

I use lang_table to manage localization for flutter_starter_kit project. You can found the template here. For lang_table, it is required to insert two meta codes into table’ s headers because lang_table use them for identifying the usage of a table column. Use [code=key] for the key of a json. Use [code={locale}] for the message of a specific language.

Then run the following command

flutter packages pub run lang:generate --platform=airTable --target=Flutter --input={AirTable Path} --api-key={Your Key}

You need to find your AirTable API Path and your API key.

AirTable API

For my case, the AirTable Path is https://api.airtable.com/v0/appelix5wW6lVdr4D/example

Generated json in res/string folder

Generated json files will be named in this pattern — string_{locale}.json

Run gen_lang to generate I18n.Dart and message_all.dart

Run the following command

flutter packages pub run gen_lang:generate

Then will generate i18n.dart and message_all.dart to lib/generated folder

Use i18n.dart for localization in coding

You need to add the delegate and supported locales. In coding, using S.of(context).{json key} to get the localization.

import 'package:example/generated/i18n.dart';

...

MaterialApp(
      localizationsDelegates: [
        S.delegate, // Add delegate
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate
      ],
      supportedLocales: S.delegate.supportedLocales, // Add supported locales
      
      ...
      ...

        S.of(context).homeSearchHint;
        S.of(context).homeRecommend;
        S.of(context).detailRate;
        S.of(context).homeEmptyList;

More Example

You can go to gen_lang and flutter_starter_kit ‘s example to learn more how to integrate with these plugins into your projects.

Enjoy it :)

— — — — —
Technical Founder in Wenjetso
Wenjetso 搵著數: https://www.wenjetso.com/zh_HK
PlakerLab 創玩坊: https://www.plakerlab.com
Keywords: Travel, Jetso, Jetso Finder, 著數, 著數網, 搵著數