Internationalization in Flutter using GetX

Overview

In this article, we will be going to discuss how we can implement language internationalization in flutter using GetX. We will be also discussing Locale, changing locale, and translations. we will also look at how changing the device language will also change the language of the app. And all this we will do with the help of the GetX package.

TL;DR: you can find the source code here.

What is Locale?

The Locale class identifies the user’s language. Mobile devices support setting the locale for all applications, usually using a system settings menu. Internationalized apps respond by displaying values that are locale-specific. For example, if the user switches the device’s locale from English to French, then a Text widget that originally displayed “Hello World” would be rebuilt with “Bonjour le monde”.

Implementation

GetX has made it very easy to implement the localization very easy. You can achieve this in a few steps

1. Wrap you MaterialApp widget with GetMaterialApp and set the device locale as the default app locale for the application using locale: Get.deviceLocale what this will do is that it will get the user's default locale and set it to apps locale.
2. Define the fallback locale, this will comes into the picture when an invalid locale is selected. This is done using fallbackLocale: Locale(‘en’, ‘US’) the property, here we are specifying that if there is an invalid locale, it will be automatically changed to ‘en_US’
3. Now we need to add the translationkeys to the GetMaterialApp widget using translationsKeys: AppTranslation.translationsKeys property.
   Note: I am also using the GetX for navigation and state-management but you can use the default navigation or any other state-management provided by the flutter.
   After step 1–3 out main.dart will look something like this.

4. Now we will create a new abstract dart class with the name AppTranslation.dart and we will add our translations there.

Now that all we need to do for the basic implementation. You can get the language code from here

5. Now we will create a UI to change the language of the app based on user selection. we will be creating a Dropdown and on the selection of any item from it will change the Apps locale

we have a dropdown of the languages at the AppBar and on choosing the language we will translate the text to the language. Also, we are showing the current device locale and below that, we have a Text widget that holds the translated text. Just call .tr on the text and it will be translated example: Text(‘title’.tr);

To change the locale

Locale locale = new Locale(languageCode); //languageCode=ru or es
Get.updateLocale(locale);

This is how our home_view.dart looks like

home_controller.dart

Now to show you that after updating the locale when you navigate to some other page the state is being maintained. we can see that by moving to the next string and applying translation on the string. To illustrate this we will make another page with the name DetailsView with a Text widget and we will apply translations on that text.

Now, one more important feature is that if we change the language of our device our app's language will be automatically changed provided it is available in our translations.

That’s all for this article. You can find the link to the repository here. In the next article, we will be google translation API to translate the text, and using this we don’t need any kind of translation to be stored in the app. If you find this article helpful do hit the clap button and follow me for more such informative articles.

You can find me on Linkedin or stalk me on GitHub? If that’s too social for you, just drop a mail to adityaprakashjoshi1@gmail.com if you wish to talk tech with me.