How to localize your Flutter application
Mar 23 by Michał Nowak

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.

img

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:

return MaterialApp(
 localizationsDelegates: [S.delegate],
 supportedLocales: S.delegate.supportedLocales,
 home: MainPage(),
);

Don’t forget to import 'package:appinternalization/generated/l10n.dart';.

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)img

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:

image-20200323101907733

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:

body: Center(
 child: Text(S.of(context).clickButtonCounterFormat(_count)),
),

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:

"clickButtonCounterFormat": "{count, plural, one{You have pushed the button 1 time} other{You have pushed the button {count} times}}"

It will format the string just like it did previously, except when 1 argument occurs.

Thank you for reading

Hope you found this article helpful. There is link to my github repository with complete example:

https://github.com/mhnowak/app_internalization_flutter

Sources:

  • https://flutter.dev/docs/development/accessibility-and-localization/internationalization
  • https://plugins.jetbrains.com/plugin/13666-flutter-intl
  • https://pub.dev/packages/intl_utils#-installing-tab-
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.
Work together

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.
AppUnite Sp. z o.o.
VAT ID: PL 7831689686
Droga Dębińska 3A/3
61-555 Poznań, Poland
+48 532 568 641
office@appunite.com
Clutch Top B2B Companies PolandFinancial Times ranking of 1000 fastest-growing companies in EuropeForbes Diamonds 2020
© 2010-2020 AppUnite