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. 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.
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):
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:
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:
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:
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:
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.
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:
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.