BeginnerFlutter

Internationalizing your App

By April 13, 2020 February 9th, 2021 No Comments

It was a great time when we could translate the texts directly in Android Studio.

For the first Apps I created in Flutter I was just following the official documentation to internationalize the Apps. I was ok-ish for small Apps.

Even though I found the way to translate an App in Flutter a step backward compared to Native Android. I missed the keyboard shortcuts to mode a string from code to strings.xml. Or the usage of the Translator tool embedded in Android Studio.

Apart from the plurals, token substitution, and some others.. 🙁

When I got medium/Big Apps to create for clients I decided that was not the way to continue making an App.

And then, I found a cool package. (who said community in Flutter is not mature?! oh it was me..sorry 😋)

Luckily Easy Internationalization provides a clean way to keep the translations in a json file and other features!

Arguments for substitution in the text.

plurals.

genders.

-It can even load the file remotely.

Nested declarations.

Let’s see how it works!

I just declare it in the package.yaml

 

Next. The declaration of the directory of resources for the language files. All the json are going to be there. I don’t use remote feature since these Apps don’t need them.

 

In our App declaration in Dart file.

Next step it is just declaring the EasyLocalization framework in the App with the languages I want in my App and the directory where the json files are going to be located.

void main() => runApp(EasyLocalization(supportedLocales: [
      Locale('es','ES'),
      Locale('en','US'),
    ], path: 'resources/langs', child: MyApp()));

And declare the delegates:

 

localizationsDelegates: [
      GlobalMaterialLocalizations.delegate,
      GlobalWidgetsLocalizations.delegate,
      EasyLocalization.of(context).delegate,
    ],
    supportedLocales: EasyLocalization.of(context).supportedLocales,
    locale: EasyLocalization.of(context).locale,

 


How to use it?

Here it is a welcome message in the App using a simple Text widget.

Text("Welcome David");

Let’s localize this text.

First approach. In the json file es-ES.json and en-US.json I will declare the following:

{
    "welcome": "Welcome David",
}

In my es-ES.json will be like this:

{
    "welcome": "Bienvenido David",
}

In order to use it I will just replace the string in the widget Text by this:

Text(tr("welcome"));

tr will look for the key “welcome” in the json file and display it.

Ok, now we have the basics, let’s see some more features!

 

Arguments

We don’t want to display David every time. so will parametrize the string this way:

 

{
   "welcome":"Welcome {}"
}

and in dart code:

Text(tr("welcome",args: ['David']);

That’s it!

Nested

Hey but I have different “welcome” keys depending on the page. When a user is in Signin it says “Welcome” but when the user is already logged it says “Welcome $user”. We can indeed name the keys differently. But much better to have it divided into sections. like this:

 {
"signin": {
        "title":"Signin",
        "welcome": "Welcome",
  },
"signed": {
        "title":"Main title App",
        "welcome": "Welcome {}",
  }

}

 

Plurals

The user can buy some coins. 1,2,3… we could use, “{} coin/s” string, but that is ugly. We are already used to use the plurals in this case.

"coins": {
    "zero": "Bought {} coins",
    "one": "Bought {} coin",
    "two": "Bought {} coins",
    "few": "Bought {} coins",
    "many": "Bought {} coins",
    "other": "Bought {} coins",
},

Conclusion

 

Easy, clean, fast way to internationalize your App in Flutter.

And the advantage to use json file which can be really easy to import in any of the online translation tools there is in the market.

Happy Flutter ! 💙

Bonus!

Switching between .dart files and json files to copy/paste the keys/values for our localized strings can be a waste of time.

That is why I looked fot a solution that speed up this process. I found it thanks to an Android Studio Plugin.

Original plugin by Norbert link here

Fork by my to make it work in Android Studio (also gradle and kotlin)here you can download it here

Ernie

Author Ernie

More posts by Ernie