Flutter Dynamic Localization Tutorial

Flutter Dynamic Localization Tutorial


QRChat

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

Flutter Dynamic Localization Tutorial App
Flutter Dynamic Localization Tutorial App

So, here is the code, without any of the comments. But we did make 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 packages to our pubspec.yaml (click Packages get afterwards):

Check intl and intl_translation for the current version. After that, create a new dart file in your ./lib folder and name it “localizations.dart“:

Don’t worry, initializeMessages will be added soon. Also, be aware of two things here: First, add all strings – all that should be localized anyway – in the same way text(counter) => … is added. Also, 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. Keep in mind to 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_en.arb lib/l10n/intl_de.arb lib/l10n/intl_ru.arb

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

The ./lib folder
The ./lib folder

How to show translated strings in 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). Also, go to the Info section of your project and add German and Russian to Localizations:

Add German and Russian to Flutter Dynamic Localization Tutorial  App
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
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

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.

Add InfoPlist.strings and localize it
Add InfoPlist.strings and localize it

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
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. Also, 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. And for more information check the official website. In addition, if you are interested in other Flutter-related topics, have a look at my website. Maybe you want to know, how to use Firestore in Flutter. Or how to authenticate with Firebase.


QRChat

Flutter Dynamic Localization Tutorial
Flutter Dynamic Localization Tutorial

Share

2 Responses

  1. Hi, I followed this tutorial in Android and everything works well except for the App Title localization. It always uses the title in the default folder (res/values) no matter what language I set on my phone. Anyone know how to fix this? Thanks in advance.

    • Hi! Thanks for the Feedback. I will have another look at it soon, maybe something changed, since flutter is still very much in development! I am a little short of time at the moment, but I will check it out soon! best regards.

Leave a Reply

Your email address will not be published. Required fields are marked *

Post comment