2021/8/27 : Flutter : Guide for building internationalized Flutter apps の訳パート1


Guide for building internationalized Flutter apps

Authors: Hans Muller (@hansmuller), Shi Hao Hong (@shihaohong)

Go Link: flutter.dev/go/i18n-user-guide

Created: April 2020   /  Last updated: September 2020

If you find any issues with this document, please file an issue on Github.



Locale – a compact representation of a written language. The Locale class represents locales, for example Locale(‘en’, ‘US’) represents English as it’s written in the United States.

Locale – 言語のコンパクトな表現。Localeクラスは場所を表します。例えば、Locale(‘en’, ‘US’)



Localization – the process of adding support for one or more locales to an application. An app supports a locale when the text the app displays is in the corresponding language.

Localization – 1つ以上のロケールのサポートをアプリケーションに追加するプロセス。 アプリが表示するテキストが対応する言語である場合、アプリはロケールをサポートします。


Internationalization – the process setting up an app so that it can be localized.

Internationalization – ローカライズできるようにアプリを設定するプロセス。


We will refer to an app’s “user-facing strings” as messages, and refer to its complete list of user facing strings as its message catalog.



A Flutter application is localized by defining a version of its message catalog for each locale that the application supports. The localized value of a message is often referred to as its “translation”.

Flutterアプリケーションは、アプリケーションがサポートするロケールごとにメッセージカタログのバージョンを定義することでローカライズされます。 メッセージのローカライズされた値は、「翻訳」と呼ばれることがよくあります。


Flutter apps define message catalogs with “Application Resource Bundles”: JSON format files with a “.arb” filename extension.

Flutterアプリは、「Application Resource Bundles(ARB)」ファイルでメッセージカタログを定義します。ARBファイルは拡張子が「.arb」のJSON形式のファイルです。


The messages themselves are defined using a subset of a syntax called ICU, which is supported by many organizations and tools, like Google, Apple, IBM, ICU4J (Java), and ICU4C (C, C++).

メッセージ自体は、ICUと呼ばれる構文のサブセットを使用して定義されます。これは、Google、Apple、IBM、ICU4J(Java)、ICU4C(C、C ++)などの多くの組織やツールでサポートされています。


Although this may all sound like a bit much, it’s not complicated in practice. The following file, called “app_en.arb”, defines a message catalog with a single message called helloWorld.

これは少し難しく聞こえるかもしれませんが、実際にはそれほど複雑ではありません。 「app_en.arb」という名の次のファイルは、helloWorldと呼ばれる単一のメッセージを含むメッセージカタログを定義します。

  "@@locale": "en",

  "helloWorld": "Hello World!",
  "@helloWorld": {
    "description": "The conventional newborn programmer greeting"


The first line indicates that the catalog defines localizations of messages for English.



The “helloWorld” line defines the English translation for the app’s helloWorld message, which is “Hello World!”.



The JSON object that follows “@helloWorld” contains a description of the message that’s intended to help translators. It also becomes a comment in the method  generated for the message.

「@helloWorld」に続くJSONオブジェクトには、翻訳者を支援することを目的としたメッセージの説明が含まれています。 また、メッセージに対して生成されたメソッドのコメントにもなります。


A Flutter application can look up a message’s translation by using the generated AppLocalizations class.



Here, we’ve created a Text widget that will display a localized version of the helloWorld message.



The static AppLocalizations.of() method looks up the message catalog for the locale of the current BuildContext, and returns the translation.


Setting up an internationalized application

Create a new Flutter application in a directory of your choice  with the `flutter create` command:

`flutter create`コマンドを実行して、新しいFlutterアプリを、あなたの選択したディレクトリに作成しましょう。


flutter create <name_of_flutter_app>


The following sections describe the process for setting up an internationalized application in more detail. Here’s a quick outline of the process:

次のセクションでは、国際化対応アプリケーションを設定(set up)するプロセスについて詳しく説明します。 プロセスの概要は次のとおりです。

  • Add the i18n dependencies to your app’s pubspec.yaml file.
  • Create a  new configuration file for localizations called l10n.yaml. 
  • Create a new “template” message catalog, like lib/l10n/app_en.arb. 
  • When the application is run, a new class that provides access to the message catalog will be generated automatically. You’ll import this class.
  • (optional) Internationalizing iOS applications


  • pubspec.yamlファイルに依存関係としてi18nを追加する。
  • l10n.yaml(エル10エヌ.ヤムル)ファイルという名前の、設定ファイルを新規作成する。
  • lib/l10n/app_en.arbファイルを新規作成します。(新しいメッセージカタログのテンプレートです。)
  • アプリケーションを実行すると、メッセージカタログへのアクセスを提供するクラス(が定義されたファイル)が自動的に生成されます。あなたはそのクラスをインポートして使用します。(pub get、あるいはアプリの実行で自動的に生成される。)
  • (オプション) iOSアプリを国際化する。

Update the pubspec.yaml file

Update the Flutter project’s pubspec.yaml to include the `flutter_localizations` and `intl` packages. These packages will be used by your Flutter application and by the code that the localizations tool will generate.

Flutterプロジェクトのpubspec.yamlを更新して、 `flutter_localizations`および` intl`パッケージを含めます。 これらのパッケージは、Flutterアプリケーションとローカリゼーションツールが生成するコードによって使用されます。


In your pubspec.yaml, add the following:


    sdk: flutter
  # Internationalization support.
    sdk: flutter
  intl: 0.16.1
  # the rest of your dependencies
  # Adds code generation (synthetic package) support 
  generate: true


Create the l10n.yaml file

In the root directory of your flutter application, create a new `l10n.yaml` file that contains the following:


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

The `l10n.yaml`configuration file is used to customize the tool that generates the localization classes your application will import.

この `l10n.yaml` 設定ファイルは、あなたのアプリがインポートする国際化用クラスを生成するツールをカスタマイズするために使用されます。

  • `arb-dir` specifies the directory where the tool expects to find input files. This directory will contain “.arb” format message catalogs.

`arb-dir`は、インプットファイルの場所(ディレクトリ)を指定します。このディレクトリは“.arb” formatのメッセージカタログを含みます。

  • `template-arb-file` A message catalog that defines all of the messages your application supports as well as metadata for each message. This file must be created in the arb-dir.

`template-arb-file`アプリケーションがサポートするすべてのメッセージと各メッセージのメタデータを定義するメッセージカタログ。 このファイルはarb-dirに作成する必要があります。

  • `output-localization-file` defines the main Dart class file that the tool will generate and your application will import. All of the files generated by the tool will be generated in `arb-dir`.

`output-localization-file`は、ツールが生成し、アプリケーションがインポートするメインのDartクラスファイルを定義します。 ツールによって生成されるすべてのファイルは、 `arb-dir`に生成されます。


The l10n.yaml file supports many other configuration options. See the “Configuring the l10n code generator: The l10n.yaml file” below for details.

l10n.yamlファイルは、他の多くの構成オプションをサポートしています。 詳細については、以下の「l10nコードジェネレーターの構成:l10n.yamlファイル」を参照してください。

Create the template ARB file, lib/l10n/app_en.arb

Create the arb-dir directory and template-arb-file specified in the top-level l10n.yaml file.



The template-arb-file is an ARB format message catalog for one, convenient, locale which defines all of the messages that the application supports.



Note: Filenames for all arb files cannot contain underscores other than for describing the locale. The internationalization tool uses underscores to parse out the language, country, and script codes for each arb file.

注:すべてのarbファイルのファイル名に、ロケールの説明以外にアンダースコアを含めることはできません。 国際化ツールは、アンダースコアを使用して、各arbファイルの言語、国、およびスクリプトコードを解析します。


We could start with the same sample English message catalog discussed earlier.


  "@@locale": "en",

  "helloWorld": "Hello World!",
  "@helloWorld": {
    "description": "The conventional newborn programmer greeting"

The name of each message in the template catalog will become the name of the Dart method that the application will use to retrieve the localized value of that message.



As noted below, message names like “helloWorld” must be valid Dart method names.


Integrating the automatically generated localizations class

The final setup step is to import the generated `app_localizations.dart` file and integrate the AppLocalizations class with your Flutter app:

最後のセットアップ手順は、生成された `app_localizations.dart`ファイルをインポートし、AppLocalizationsクラスをFlutterアプリと統合することです。

import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart'; // Add this line.

void main() {

class MyApp extends StatelessWidget {
 Widget build(BuildContext context) {
   return MaterialApp(
     // Add the `localizationsDelegate` and `supportedLocales` lines.
     localizationsDelegates: AppLocalizations.localizationsDelegates,
     supportedLocales: AppLocalizations.supportedLocales,
     home: MyHomePage(title: 'Flutter Demo Home Page'),


Now the application can look up localizations messages using the AppLocalizations class. For example to give the MyHomePage’s AppBar a localized title:

これで、アプリケーションはAppLocalizationsクラスを使用してローカリゼーションメッセージを検索できます。 たとえば、MyHomePageのAppBarにローカライズされたタイトルを付けるには:

class _MyHomePageState extends State<MyHomePage> {
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       // Replace the title line with the following:
       title: Text(AppLocalizations.of(context).helloWorld),
    // The rest of the widget tree.

The AppLocalizations class itself imports one additional class per supported locale, i.e. one additional class for each message catalog in the output directory.


The automatically generated localizations class, AppLocalizations

The tool that generates the localizations class will execute automatically each time the application is run or restarted as part of the build process.



By default, the name of this class is AppLocalizations and you’ll find it in `.dart_tool/flutter_gen/gen_l10n/app_localizations.dart`.

デフォルトでは、このクラスの名前はAppLocalizationsであり、このクラスは、 `.dart_tool / flutter_gen / gen_l10n / app_localizations.dart`にあります。


This means that the generated code will not be checked into version source control, which is by design since the code is an artifact that’s only needed when your Flutter app is built.


When running the Flutter app, the IDE may present you with a warning indicating that build errors exist in your project.



This is because the localizations code will need to be generated for the first time (note that the warnings should be about the missing import and AppLocalizations class not existing).



Proceed to run the Flutter application, which should generate your localizations code.



For example, in VSCode, you can run the Flutter app by selecting “Debug Anyway” in the build error dialog that appears.

例えば、VSCodeでは、表示されるビルドエラーダイアログで「Debug Anyway」を選択することで、Flutterアプリを実行することができます。

Starting with the sample template message catalog, upon successfully building the application,  you’ll find two files in the output directory:


`.dart_tool/flutter_gen/gen_l10n/app_localizations_en.dart`, and `.dart_tool/flutter_gen/gen_l10n/app_localizations.dart`. 


The AppLocalizations class, defined in app_localizations.dart,  dispatches message lookups to the appropriate locale-specific class, based on the locale requested by application.



At this point there’s just one locale-specific class, and it’s defined in app_localizations_en.dart.



If these files were not generated, verify that there are no errors in the Flutter app, and review the steps to ensure that everything has been done correctly.


Upon running the app, you’ll see “Hello World!” in the application’s AppBar:

アプリを実行すると アプリケーションのAppBar内に「HelloWorld!」と表示されます。

Adding support for a new locale

To add a Spanish message catalog, create a new file, `lib/l10n/app_es.arb`, and add the following:

スペイン語のメッセージカタログを追加するには、新しいファイル `lib / l10n / app_es.arb`を作成し、下記を記入してください。

  "@@locale": "es",
  "helloWorld": "Hola Mundo!"

This file is just like the template message catalog, except that it only contains translations, it does not contain meta information.



Now, try hot reloading the application. This will generate the `app_strings_es.dart` file, which will contain the Spanish strings that your application will use.

ここで、アプリケーションをホットリロードしてみてください。 これにより、アプリケーションが使用するスペイン語の文字列を含む `app_strings_es.dart`ファイルが生成されます。


Nothing should have changed in your Flutter application (except if your test device’s locale was already set to Spanish).



In the next section, we’ll go into more detail about how to change the app’s locale in Flutter.


(optional) Internationalizing iOS Flutter Applications

If you’re testing on an iOS device or plan to support iOS devices in your Flutter application, you will need to correctly update the iOS app bundle with a list consistent with the languages listed in AppLocalizations.supportedLocales. If you plan to follow this user guide with an iOS test device, be sure to add “en” and “es” into that list.

iOSデバイスでテストしている場合、またはFlutterアプリケーションでiOSデバイスをサポートする予定の場合は、AppLocalizations.supportedLocalesにリストされている言語と一致するリストでiOSアプリバンドルを正しく更新する必要があります。 iOSテストデバイスでこのユーザーガイドに従うことを計画している場合は、必ず「en」と「es」をそのリストに追加してください。

Running An Internationalized App

After setting up your Flutter application to handle internationalization, you will need to either update the test device’s locale, or use Localizations.override to see the localized messages.



While updating the test device’s locale is the most common use-case,



let’s go ahead and use Localizations.override first to verify that the localized messages appear correctly in the Flutter application,



Since using Localizations.override only requires a code change to your Flutter application to see results.



On the other hand, the steps for changing a test device’s locale may vary by platform.



Localizations.override is a factory constructor for the Localizations widget that allows for (the usually rare) situation where a section of your application needs to be localized to a different locale than the locale configured for your device.



Let’s add some code to the body of your Flutter application to observe this behavior:


Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(AppLocalizations.of(context).helloWorld),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // New code
              context: context,
              locale: const Locale('es'),
              // Using a Builder here to get the correct BuildContext.
              child: Builder(
                builder: (BuildContext context) {
                  return Text(AppLocalizations.of(context).helloWorld);
            // ...
      // ...

Upon hot-reloading, you will observe that the same call to AppLocalizations.of(context).helloWorld nested in Localizations.override returns the Spanish string, while AppLocalizations.of(context).helloWorld should return  the English string if the test device’s locale was set to a non-Spanish one.

ホットリロードすると、Localizations.overrideにネストされたAppLocalizations.of(context).helloWorldの呼び出しがスペイン語の文字列を返すのに対し、AppLocalizations.of(context).helloWorldは、英語の文字列を返すことが確認できます。 (テストデバイスのロケールがスペイン語以外のものに設定されている場合)

Updating the test device’s locale

Since the steps to update a test device’s locale will be different based on the platform you’re working with, we will omit those steps and leave it to you to figure that out based on the test device you’re using.



After updating a platform if you change your device’s locale to Spanish, you will see the following:


Defining Messages and Message Catalogs

All of the messages for one locale are defined in a single “.arb” file that contains one JSON object.  Typically the object’s first name/value pair defines the file’s locale:

1つのロケールのすべてのメッセージは、1つのJSONオブジェクトを含む単一の「.arb」ファイルで定義されます。 通常、オブジェクトの最初の名と値のペアは、ファイルのロケールを定義します。

  "@@locale": "en",
     … message definitions

The filename can also define the catalog’s locale if it ends in an underscore followed by a locale name. For example app_en_US.arb is a message catalog for the “en_US” locale.

ファイル名は、アンダースコアの後にロケール名が続く場合、カタログのロケールを定義することもできます。 たとえば、app_en_US.arbは、「en_US」ロケールのメッセージカタログです。


Typically apps define the locale redundantly, with both the filename suffix and the “@@locale” entry.

通常、アプリは、ファイル名のサフィックスと「@@ locale」エントリの両方を使用して、ロケールを冗長的に定義します。

Each of the app’s messages must have a name that’s unique relative to the message catalog.



The names must be suitable as Dart method names: camel case, beginning with a lowercase letter.


Each message should be defined by two name value pairs. The first names the message and specifies its translation.

各メッセージは、2つの「名前と値のペア」で定義する必要があります。 最初はメッセージに名前を付け、その翻訳を指定します。



The second must have the same name as the first with a single ‘@’ prefix.



Its value is a JSON object that describes the message for the sake of translators and the code generation tool.


  "@@locale": "en",

  "helloWorld": "Hello World",
  "@helloWorld": {
    "description": "The conventional newborn programmer greeting"



Although the value of @foo can be empty, it’s a good practice to include a description.



Messages with parameters require some additional @foo properties, as we’ll see below.



2021/8/27 : Flutter : Guide for building internationalized Flutter apps の訳パート2へ続く>>





New and easy internationalization of Flutter apps

described in the official guide,


メールアドレスが公開されることはありません。 が付いている欄は必須項目です