Flutter Internationalization — The easiest way

“The Easiest Way”, according to me.

I was checking internationalization in Flutter and after different implementation I got to know the easiest way possible for me.

I am sure you must have heard about GetX package. The most liked package on https://pub.dev.

https://pub.dev

GetX provides a lot of cool features from State Management to Navigation to Dependency Injection. But there are other features also provided by GetX. One of them is the Internationalization. And after going through there doc its very easy to implement and use it every where in your application.

Enough talk, let’s get the implementation started,

Step 1

Add GetX to your project, 😜. Well, that’s the known step to use anything from a package. And the good thing is GetX is now Null-Safe.

get: ^4.1.3

The version number might have increased till the time you are reading this so please check up on the https://pub.dev before adding this.

Step 2

Add GetMaterialApp as your root Widget by replacing the MaterialApp. This is where all the magic happens.

Step 3

Now, we will be creating a Translation file, which will be containing all your translations strings which you will be using in your application.

So create a dart file and name it whatever you like. I will name it as translations_file.dart. Now, create a class by extending the class Translations class which is provided by GetX

class TranslationsFile extends Translations

Now, you will be getting an error

Error

So, as the error says need to implement the method provided by Translations. Which is:

Map<String, Map<String, String>> get keys

Since it has a return type of Map<String, Map<String, String>>, means a map which has a key of type String and value as a Map of type String and String for keys and values respectively.

So lets add the Maps now:

@override
Map<String, Map<String, String>> get keys => {
    ‘en’: {
        ‘welcomeTo’: ‘Welcome to’,
    },
};

So what does this means,

We have a “en” key which tells the value of this key will contain the map for the English language. So now for English language you have a key welcomeTo with the value Welcome to.

Step 4

Now we need to tell the GetMaterialApp that use that TranslationsFile class for the strings which we are using in the application. So for that in GetMaterialApp we have a parameter name translations. Give this file as an argument for it.

Specify the Translation file

Now, GetX have your Strings. But if you run you will notice that nothing has changed. Why? Because we haven’t tell the UI from where to get the String from. And GetX has got you covered for this.

Step 5

There is one approach given by GetX itself.

Text('welcomeTo'.tr);

By adding .tr at the end, GetX will try to find the value for ‘welcomeTo’ in the TranslationsFile. And give the value for it. By any chance if no value found it will return the key itself instead of null.

But this approach is good and will also give you extra features, like passing values to the String or giving plural values and so on.

If your application do not require all this and you just need the value without any change you can continue reading or you can go to the last step.

One approach which I take for a normal application is making a String constant class and adding all the keys there. Like for exmaple:

abstract class StringConstants {
    static String welcomeTo = 'welcomeTo'.tr;
}

And any where if I want to use ‘welcomeTo’, I simply call

Text(
    StringConstants.welcomeTo,
)

This way it helps in not making any mistake while using the keys. Because if the key is wrong you will always get the string before .tr.

Step 6

By now if you run, even if you have given and used the correct keys you will still see welcomeTo in your Text widget and why is that.

The reason is we haven’t told GetMaterialApp that from what Locale it needs to find the values for the keys. For this you only need to write one line in the GetMaterialApp for the parameter locale, like below

locale: Locale(
    "en",
),

So all the string will be taken from “en” key in the TranslationFile. Now, restart the application or do hot restart. You will see “Welcome to” in your text widget.

NOTE

If needed to add another language,

@override
Map<String, Map<String, String>> get keys => {
    ‘en’: {
        ‘welcomeTo’: ‘Welcome to’,
    },
    ‘es’: {
        ‘welcomeTo’: ‘Bienvenida a’,
    },
};

Now, if you need to make the application to use the Spanish language string values, for your locale parameter in your GetMaterialApp set “es”.

locale: Locale(
    "es",
),

Just like that you will have internationalization. Make sure the keys are same for all the language code. But what if by any chance a key is typed wrong for other language. We can’t just show the key as a text.

GetX has got us covered.

fallbackLocale: Locale(
    "en",
),

Use fallbackLocale, If by any change the key is not found in the other languages it will search in the fallbackLocale locale.

Here is an easy way of internationalization in your Flutter application. Feel free to give your opinion. ☺️

Flutter : Love at first build.