0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Flutter 多言語化対応備忘録

Posted at

Flutterでアプリを多言語対応させる:非エンジニアでも編集しやすいarbファイルを使う

以前は localizationRiverPod で自作ローカライズをしていましたが、Flutter公式の方式に移行した際の手順をまとめました。


今回やりたいこと

  • Flutterアプリを日本語などの多言語に対応させる
  • .arb ファイルを使って、翻訳をわかりやすく管理(JSONライクな形式)⭐️誰でも編集しやすい
  • Flutterウィジェット(Material, Cupertino, Widgets)の標準翻訳も有効化

🧱 セットアップ手順

以下の通りに進める


1. パッケージの追加

flutter pub add flutter_localizations --sdk=flutter
flutter pub add intl

2. MaterialAppにローカライズ設定を追加

return MaterialApp(
  title: 'Localizations Sample App',
  localizationsDelegates: [
    // ⭐️自作ローカライズもここに追加予定
    // 追記
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  supportedLocales: [
    Locale('ja'), // 対応する言語を追加
  ],
);

GlobalMaterialLocalizations.delegate

Material Design 系のウィジェット(例:AppBar, DatePicker, Dialog など)に使われている文言を、自動的に翻訳してくれます。


GlobalWidgetsLocalizations.delegate

ウィジェットのテキストの方向(左→右 / 右→左)などの制御をしてくれる翻訳です。


GlobalCupertinoLocalizations.delegate

iOSスタイル(Cupertino系)のウィジェット(例:CupertinoAlertDialog, CupertinoDatePicker)に含まれる文言を翻訳してくれます。

3.

1で追加したintlライブラリによる自動生成を有効化する

pubspec.yaml
flutter:
    generate: true

4.

ルートディレクトリにl10n.yamlを作成する


# arbファイル(翻訳ファイル)を置くディレクトリ
# デフォルトはlib/l10n
arb-dir: lib/l10n

# 基準となるarbファイル(自動生成するファイルの元になる言語ファイル)
# デフォルトはapp_en.arb 
template-arb-file: app_ja.arb

# 自動生成されるDartファイルのファイル名
output-localization-file: app_localizations.dart

# 自動生成されたDartファイルの出力先ディレクトリ
output-dir: lib/localization/generated

# falseにすると 自動生成されたファイルが↑のディレクトリに出力される。
# 中身の確認がスムーズなのでfalseにしておく
synthetic-package: false

5. .arbファイルを作成

app_ja.arb
{
  "animal": "動物",

  "greet": "こんにちは{name}です",
  "@greet": {
    "description": "昼間の挨拶を表示します。{name}はユーザーの名前です。",
    "placeholders": {
      "name": {
        "type": "String",
        "example": "太郎"
      }
    }
  }
}

⚠️ 末尾に,を書かないとエラーになるので注意

exampledescriptionを記入しておけば、このテキストがアプリのどの部分に表示されるかを知らなくてもニュアンスが伝わりやすい。

flutter gen-l10nでコードが自動生成される
flutter pub getでもOKだけど、ローカライズ周りだけを更新するgen-l10nの方が実行が早い

あとは、一行入力するたびにターミナルで実行でOK

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?