How to localize app in Flutter

Localizing your app is important requirement if you want your app to be used across the world. Flutter provides the simple way to localize your app by using arb files. This article will explain how to localize your app in Flutter. Please note that this article is based on Flutter 2.0.1 so if you are using older versions, the way explained in this article may not work.

1. Add dependencies to pubspec.yaml

Add dependencies to pubspec.yaml

1dependencies:
2  flutter:
3    sdk: flutter
4  flutter_localizations:
5    sdk: flutter
6  intl: ^0.16.1

These packages are necessary for localization.

2. Add generate flag to pubspec.yaml

1flutter:
2  generate: true

This flag enables Flutter to generate AppLocalizations class from arb files which is necessary for localization.

3. Create l10n.yaml

1arb-dir: lib/l10n
2template-arb-file: app_en.arb
3output-localization-file: app_localizations.dart

This file provides configurations when automatically generating AppLocalizations class. arb-dir specifies the directory for arb files. template-arb-file specifies the arb file used as template. output-localization-file specifies the name of AppLocalizations class file.

4. Create arb file

Create arb file at the directory specified in l10n.yaml. arb file is json format and you can provide translations for each key. The kay is called resource id and the value is called resource value. For example, the example below provides English translation for the resource id helloWorld.

1{
2  "helloWorld": "Hello World!",
3  "@helloWorld": {
4    "description": "The conventional newborn programmer greeting"
5  }
6}

You can provide the detailed explanation to the resource id by adding @ prefix to the resource id. In the above example @helloWorld describes the detailed information of the resource id helloWorld. Then you can create other arb files according to the language your app supports. For example, if you support Japanese language, you can add app_ja.arb file like below.

1{
2  "helloWorld": "こんにちは世界!"
3}

arb file provides various useful expressions and here I'll introduce one of them, placeholder. Placeholder enables you to pass parameters to resource value.

1"pricePerMonth": "{price} per month",
2"@pricePerMonth": {
3  "placeholders": {
4    "price": {
5      "example": "123.45",
6      "description": "price"
7    }
8  }
9}

You can pass any parameters in resource value like {price}. Then write description of the parameter in placeholders under @resource id. Once you create placeholder and auto generate AppLocalizations class, you can call it from your app like below.

1AppLocalizations.of(context).pricePerMonth(100.0);

5. Automatically create AppLocalizations class file

If you call flutter pub get or build your app, AppLocalizations class file will be automatically generated. The file name is specified in the l10n.yaml. In this case, the file would be .dart_tool/flutter_gen/gen_l10n/app_localizations.dart. The directory is determined by the system.

By the way, you don't need to commit this file to git. This file is always generated when you build your app and reflect the latest arb file contents.

6. Call Material/Widget/CupertinoApp

Set localizationsDelegates and supportedLocales parameters. Do not forget to import the AppLocalizations class.

1import 'package:flutter_gen/gen_l10n/app_localizations.dart';
2 
3@override
4Widget build(BuildContext context) {
5  return MaterialApp(
6    localizationsDelegates: AppLocalizations.localizationsDelegates, // Add this line
7    supportedLocales: AppLocalizations.supportedLocales, // Add this line
8    home: // ...
9  );
10}

7. Call translated text

You can use localized text like the example below. The syntax is like AppLocalizations.of(context).<resource id>.

1Text(AppLocalizations.of(context).helloWorld);

Localizations for date

You can also display localized date like below.

1Locale locale = Localizations.localeOf(context);
2DateFormat.yMd(locale.toString()).format(DateTime.now());

References

• Flutter.dev
• ARB Specification