Flutterのskeletonを、localizations周り中心に見てみる。

noboru_i 2021/11/13

flutter create -t skeleton flutter_skeleton を実行して、その出力されたコードを見てみる。

特に、 localizations のあたりを見てみる。

noboru_i 2021/11/13

そもそもの整理。

internationalization について、公式ページは以下の通り。

日本語で、いい感じにまとめられているページ。
ただし、2019年5月が最終更新っぽいので、最新ではないかも。

noboru_i 2021/11/13

メモ

pubspec.yaml に、 flutter_localizations がある。
あと、 generate: true がある。
でも、それぐらい。
（昔は、 intl や intl_translation があったけど、不要になった？）

l10n.yaml に、各種ファイルパスなどの指定がある。

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

lib/main.dart では、themeの切り替え設定があるぐらい。
（こちらの実体は lib/src/settings/settings_controller.dart にある）

lib/src/app.dart の MyApp はいくつかの機能を持っている。

AnimatedBuilder にて、 settingsController で保持されている theme の設定の変化を listen している。（変更があれば、 MaterialApp.themeMode が変わるようにしている。）
MaterialApp.restorationScopeId = 'app' としている。バックグラウンドで勝手に殺されたときに、Navigatorの状態を復元できるっぽい？
localizationsDelegates, supportedLocales で多言語対応をしている。
- localizationsDelegates では、定形？の3つのほか、 AppLocalizations.delegate を指定している。
- supportedLocales では "en" のみを指定しているので、必要な言語を追加する必要がありそう。
onGenerateTitle で、アプリのタイトルを多言語対応している。
- https://api.flutter.dev/flutter/material/MaterialApp/title.html
- Androidでは、 "recent apps" で表示されるもの（Android 12 だと表示されていないかも？）
- iOSでは利用されないっぽい。
onGenerateRoute にて、パス？ベースのナビゲーションに対応している。（パス文字列を受け取ったときに、表示するWidgetの構築して返却している）

noboru_i 2021/11/13

AppLocalizations について。

これ自体は、.dart_tool/flutter_gen/gen_l10n/app_localizations.dart に作成されており、自動生成されたもの。
l10n.yaml の設定により出力されていそう。（ファイル名も、ここで指定している。）

lib/src/localization に app_en.arb があり、template-arb-file として指定されている。
（arbファイルの構造については、 https://localizely.com/flutter-arb/ とかが参考になりそう。）

昔は、 LocalizationsDelegate を継承したクラスを独自に作成したりしていたが、この中に自動的に作成されている。

noboru_i 2021/11/13

arbファイルを増やしてみる。

{
  "appTitle": "ふらったーすけるとん",
  "@appTitle": {
    "description": "このアプリケーションのタイトル"
  }
}

また、 lib/src/app.dart にある supportedLocales を以下のようにする。

supportedLocales: const [
  Locale('en', ''), // English, no country code
  Locale('ja', 'JP'), // <- added
],

そして、試しに画面に表示されるタイトルを変えてみる。
lib/src/sample_feature/sample_item_list_view.dart の title 部分を以下のように変更。

title: Text(AppLocalizations.of(context)!.appTitle),

シミュレータの設定アプリで「日本語」を優先させると、
以下のようにタイトル文字列が「ふらったーすけるとん」に変わった。

noboru_i 2021/11/13

変数を使ってみる。

arbファイルに、項目を追加してみる。

lib/src/localization/app_en.arb

{
  "appTitle": "flutter_skeleton",
  "@appTitle": {
    "description": "The title of the application"
  },
  "variableTest": "Test: {valueText}",
  "@variableTest": {
    "placeholders": {
      "valueText": {}
    }
  }
}

lib/src/localization/app_ja.arb

{
  "appTitle": "ふらったーすけるとん",
  "@appTitle": {
    "description": "このアプリケーションのタイトル"
  },
  "variableTest": "テスト: {valueText}",
  "@variableTest": {
    "placeholders": {
      "valueText": {}
    }
  }
}

これにより、 variableTest が AppLocalizations に追加される。
（VSCodeを使っている場合、一度実行してみるのが手っ取り早いかも？）

lib/src/sample_feature/sample_item_list_view.dart で表示されるリストアイテムに適用してみる。

return ListTile(
  title: Text(AppLocalizations.of(context)!.variableTest(item.id)),

テスト: {valueText} の形式で表示された。

noboru_i 2021/12/16に更新

arbファイル作成用のスプレッドシート。
前に案件で使ったものを、いろいろ削除したもの。

使い方

「Messages」シートに、メッセージを定義していく。

B列の「screen」はメモ用。（特に影響が無い）
C列の「message ID」は、A列から自動設定。
D列・E列に表示したい文言を入力。 {} で囲むことで、変数を設定可能。

すると、「Messages for impl」シートに、コードが出力される。

J列・K列をコピーして、対象の arb ファイルに貼り付け。
「Messages」シートに行を追加した場合は、手動で行追加・既存の行にある数式をコピー。