Sometimes, there’s a need for your app to translate into multiple languages. In flutter, it’s pretty simple to implement. Let’s start with creating an empty project.

Installation

Add this line to your pubspec.yaml

flutter_localizations:
sdk: flutter

Now, you can either install a plugin for an IDE you’re using (AndroidStudio or VSCode) or simply use CLI. I recommend using a plugin for either IDE, since it has really nice features, which we will go through in this article.

However, if you decide to stick with the CLI, you’ll need to install this package instead of the extension.

Initialize for the project

Let’s start with initializing your project, which will generate some files. If you’re using AndroidStudio go to tools | flutter intl and run Initialize for the Project. It should be fairly similar in VSCode, just follow the steps in the package description.

Generated files are responsible for connecting your flutter code with the translations from .arb files. Speaking of them, they are simply json-like files and you shouldn’t have any problems while working with them.

Set up your app

There are a few things more we need to set up in our AppWidget. Add a S.delegateto your MaterialApp and specify supported locales like this:

You’ll also need to add any of the delegates to the list of delegates shown earlier, if your app needs any of them:

GlobalMaterialLocalizations.delegate, (if your app is using any Material widgets),

GlobalWidgetsLocalizations.delegate, (if your app is using right to left text direction),

GlobalCupertinoLocalizations.delegate, (if your app is using any Cupertino widgets),

If you need more info about them, just check the flutter’s open source documentation. Just remember your widgets might not render correctly if you don’t add the ones you’re using.

Add words to the dictionary

Aight, after setting this all up, let’s add our first string. Either do it by hand in .arb file:

{
"helloWorld": "Hello world!"
}

Or use a code snippet directly from .dart file (at the time of writing this article there is no such a feature in VSCode, unfortunately)

It will automatically re-generate all of the files and replace the text with S.of(context).helloWorld. If you’ve chosen the first option, you’d need to do it manually. The S class is built on top of an inherited widget and if the locale changes during the lifetime of your app, it will automatically refresh all of the texts associated with it.

Add another language

Since you probably want to have more than one. Again go to tools | flutter intl and select Add Locale, then, provide translations for whatever words you want to translate, for example:

{
"helloWorld": "Witaj swiecie!"
}

Or simply create a new .arb file named intl_<locale>.arb and do the same.

Additional set up for iOS apps

There’s one more important step for the iOS apps that needs to be done. You’ll need to add all supported locales to info.plist. It should be consistent with the locales listed in the l10n folder. Without that, the translations simply won’t work for the iOS app:

And that’s pretty much it. Now, when you change the locale language on your phone, the language in your app should also change!

Parameterized strings

Let’s get to something more complex, for example the counter app. In .arb files, you can create argumented strings like this one: "clickButtonCounterFormat": "You have pushed the button {count} times"

It will create a function that returns a string value with a dynamic parameter in the place of a count. Dart code:

But there is one problem with the current solution. Pay attention that it says that it pushed the button “1 times”. Fortunately, there is a solution! We can use ICU format to create some string “patterns” like this one:

This website stores cookies on your computer. The data is used to collect information about how you interact with our website and allow us to remember you. We use this information to improve and customize your browsing experience and for analytics and metrics about our visitors both on this website and other media.

Let’s Work Together!

Make the first step for a great partnership!Share your idea with us and check what we can do for you and your company.