Flutter Dynamic Localization Tutorial

Flutter Dynamic Localization Tutorial

Flutter Dynamic Localization Tutorial

In this Flutter Dynamic Localization Tutorial, we will just use the Default Flutter App, that gets generated, when you create a new flutter project. And what it does is, that everytime you press the Floating Action Button, a counter gets incremented and the number gets drawn onto the display.

So, here is the code, without any of the comments. And we just made some modifications.

Next, we just update the Text, so that it is either in English, German or Russian — depending on the phone language selected. Also, we want the Flutter App Name, shown on the home screen, to be localized as well. So, if the phone is in German, the app should be called “Zähler”, if it is in Russian, it should be called “Счётчик” and if it is in English, it should be called “Counter”.

Make the necessary changes — Flutter Dynamic Localization Tutorial

So, without further ado, let’s jump right into it. First, we want to add the following to our pubspec.yaml (click Packages get afterwards):

After that, create a new dart file in your ./lib folder and name it “localizations.dart“:

Also, be aware of two things here: First, add all strings — all that should be localized — in the same way like text(counter) => … is added. Second, add all supported languages to isSupported(Locale locale) => … as a locale code.

Create .arb files in the console

Next, add a folder named “l10n” to ./lib. And once that is done, execute the following in your console:

flutter pub pub run intl_translation:extract_to_arb --output-dir=lib/l10n lib/localizations.dart

After that, there will be a new file created in your ./lib/l10n folder with the name of intl_messages.arb. And you then should copy-paste this file for every language you want to support and change the name to the locale code. So, in our case, it will be three files: intl_en.arb, intl_de.arb, intl_ru.arb. Then, you have to translate all these files accordingly:

Create .dart files in the console

Once you are done with that, execute this code in your console:

flutter pub pub run intl_translation:generate_from_arb --output-dir=lib/l10n \ --no-use-deferred-loading lib/localizations.dart lib/l10n/intl_*.arb

Now your ./lib folder should look like the following screenshot:

The ./lib folder

How to show translated strings — Flutter Dynamic Localization Tutorial

So far, so good. To show the right string resource, you have to use the following line of code:

AppLocalizations.of(context).name_of_your_string()

So, in our case, we have to modify the following in our main.dart:

And that is it for the localization of the content of your app. But, to show the localized content in the IOS version, make the following adjustments in Xcode:

Adjustments in Xcode

Create the IOS build of your app with:

flutter build ios

You then can open Runner.xcworkspace with Xcode (I currently use version 10.1). Next, go to the Info section of your project and add German and Russian to Localizations:

Add German and Russian to Localizations

Now the content of our app should be localized in IOS as well.

Localization of the App Title — Android

First, make the following changes to the AndroidManifest.xml:

Also, you have to create a strings.xml file in the ./android/app/src/main/res folder for every language you want to support like in the screenshot:

Create a strings.xml for every language

For our app the strings.xml will look something like the following:

Localization of the App Title — IOS

Add InfoPlist.strings and localize it

In order to localize the app name in IOS open the Runner.xcworkspace in Xcode. So, right-click the Runner project folder and click New File… to add a new file called InfoPlist.strings. Then, highlight this file and in the File Inspector click on Localize… to add all three languages.

Then change every file accordingly:

And then just go to the Info.plist file and change the Bundle display name as well as the Bundle name to:

${PRODUCT_NAME}

Change Bundle display name and Bundle name

Now your IOS version of the app should also have a localized application name.

And that is everything for this tutorial. Check if everything works correctly by changing the language of your phone to any of our implemented languages. So, I hope this tutorial was useful to you. If it was, let me know in the comments below. Also, for more information check the official website. And if you are interested in other Flutter-related topics, have a look at my website.

Originally published at www.gotut.net.