Localization of a Flutter App

In this article I share some facts, tips and magic about the Localization of a Flutter App.

A few weeks ago I spent nearly a whole day in localizing and translating my app, Nabit - Minimalist Habit Tracker App.

There are plenty tutorials and a good documentation considering the technical way, but here a few tips and tricks that I collected after this lengthy - but rewarding! - process.

Before I start, a few recommendations for the technical side:

• Internationalizing Flutter apps (Official Flutter Documentation)
• Flutter Localization by @aruny3 at Medium

Start with Localization as soon as you start with your App

This seems obvious - but I made this mistake. I started my app in English and didn't even think about supporting other languages too soon. But then a lot of my friends and family members wanted to use my app, and a few of them were not that good in the english language.

Speed things up!

Use capsule methods

Encapsulating logic is a good way for speeding up the localization process and provide easy-to-read code. I implemented multi-language support by following the tutorial above and the official Flutter documentation. With this, I would have to call Localizations.of<NabitLocalizations>(context, NabitLocalizations).$TRANSLATION_GETTER every time I needed a translation. To be honest, I am a big fan of short, expressive code, so inside my Localizations class, I created a wrapper method for this:

static NabitLocalizations of(BuildContext context) {
   return Localizations.of<NabitLocalizations>(context, NabitLocalizations);
}

So now I just have to call NabitLocalizations.of(context).$TRANSLATION_GETTER now, which is at least a bit shorter and easier to read.

Use user snippets / live templates

Especially if you do the translation after you started your App and you already have a lot of text strings, a bit of IDE automation can be helpful, because you will have to write a lot of getters and other repetitive stuff like this

String get habitsSaved {
   return _localizedValues[locale.languageCode]['habits']['saved'];
}

Automation to the rescue! It's called »User Snippets« in VS Code or »Live Templates« in different JetBrains-Products. I created e.g. this one for the types of getters above:

"NabitLocalizationGetter": {
  "prefix": [
    "nlg"
  ],
  "body": [
    "\nString get ${1} {\n\treturn _localizedValues[locale.languageCode]['${2}']['${3}'];\n}\n\n${4}"
  ]
}

I use the shortcut »nlg« and navigate by hitting tab through the placeholders: Name of the getter, first array key, second array key. The last placeholder ${4} is set two lines below the getter and allows me to start with another one right away.

Another user snippet I created is called by typing »nl« and hitting tab for a quick access to my translations inside the Flutter-Code:

"NabitLocalization": {
  "prefix": [
    "nl"
  ],
  "body": [
    "NabitLocalizations.of(context).${1}"
  ]
}

You can manage all of your snippets inside VS Code by hitting cmd + shift + P (ctrl + shift + P on Windows), type "User snippets" and hit enter. More information about this can be found in the documentation of VS Code itself or the respective documentation of your IDE.

You'll need the build context everywhere you call for an translation!

I like to abstract my Flutter methods as much as possible to make reusing them easy. But be careful: This is also kind of obvious, but you need a BuildContext everywhere you call for a translated text!

Consider other localization tasks

Don't forget about customizable date formatting, time formats (AM/PM, 24h) or even timezones - but this is a completely different topic!

Last but not least: Watch your mouth! ;)

I shouldn't have to mention that - but I have seen to many bad translated apps in my career to not point it out again: Pay attention to your translations. Write grammatically correct, eloquent and easy-to-understand sentences. There's not much worse than the Google Translator, if you need help with translations, consider asking a friend who is fluent in your targeted language - or even a professional interpreter. Deepl is at the moment one of the better online translation tools, but even if you use this, let someone check your final translations before you release your app.

With all of this - thanks for reading! Happy to hear your thoughts and experiences about Flutter Localization.

(Random Fact, don't take it too serious: You don't speak German in Bavaria. You speak Bavarian, in many varieties... and even I, born and raised here, do not understand all of them.)

Comments

[vaclavhodek]

Once you have your project prepared for localization, Localazy is an awesome solution for managing ARB files, automating localization, managing translators and volunteers around your projects.

Also, it comes with shared translations that translate a huge portion of the app automatically to up to 80 languages.

Also, it's virtually free for the usual apps. All the above included + free machine translations.