alexrintt
@alexrinttAndroid/Flutter.
Using Nodemon to watch translation files and automatically re-run code generation in Flutter
Using Nodemon to watch translation files and automatically re-run code generation in Flutter

Although Dart has it's build system, it's not solid as rock as we see Gradle in Android. So since there is no fancy build system yet, boring tasks are still... boring.

And while I was generating the translations of my Flutter project Kanade I was looking for someway to run the generation code every time I changed something in the translation files automatically, then I simply remembered the awesome tool from JavaScript ecosystem called nodemon.


My current workflow is:

  • Edit .dart files by replacing hard-coded strings with translation strings.
  • Move the strings to the translation .arb files.
  • Re-run the Flutter CLI command to generate the .dart code from the updated .arb file (Most boring).

The Flutter CLI command to generate the dart code from the .arb translation files is:

flutter gen-l10n

The problem is that I need to run this command every time I add/change a key inside the i18n folder.

With nodemon I can simply run:

# Install nodemon (first-time only):
$ npm install -g nodemon # or using yarn: yarn global add nodemon

# Then run:
$ nodemon --watch i18n --ext arb --exec "flutter gen-l10n"

Which means: run flutter gen-l10n whenever some file that matches the pattern i18n/*.arb changes.

From now on I can simply replace strings in my dart code with keys I define in the .arb files and it will be synced automatically:

{
  "export": "Export",
  "@export": {
    "description": "String that is displayed as a settings tile title."
  }
}
// ...
Column(
  children: [
-    SettingsTileTitle('Export')
+    SettingsTileTitle(context.strings.export)
  ]
)
// ...

It's a simple tip but has saved a lot of time for me.


Reference:

Other posts

you reached the end