mcpField
F
flutter-localization

flutter-localization

github.com/dhruvanbhalara開発30115 回インストール8 週間前に更新
リポジトリ

flutter-localization について

flutter-localization は、Flutter プロジェクトのローカライズ設定を支援するスキルです。ARB ファイル、コード生成、ロケール別の書式設定、RTL レイアウトの手順を扱います。

主な機能

  1. 01flutter_localizations と intl の設定
  2. 02ARB ファイルとコード生成の設定
  3. 03context.l10n による文字列アクセス
  4. 04ICU の複数形・選択形式の利用
  5. 05RTL レイアウトとロケールテストへの対応

活用シーン

  1. 01Flutter の UI に言語を追加
  2. 02ローカライズ文字列を生成・管理
  3. 03ロケールに応じた日付・時刻・数値の書式設定
  4. 04RTL ロケールで UI の方向をテスト

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/dhruvanbhalara/skills --skill flutter-localization

インストール後、Claude Code で/flutter-localizationを入力して読み込まれたか確認します。

詳細

ローカライゼーションのセットアップ

  • Flutter に組み込まれている flutter_localizations パッケージと intl パッケージを使用します
  • 自動コード生成のために、pubspec.yaml で generate: true を有効にします
  • プロジェクトルートで l10n.yaml を設定します: 
    arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart
output-class: AppLocalizations
nullable-getter: false

ARB ファイルの構造

  • すべての .arb ファイルを lib/l10n/ に配置します
  • app_{locale}.arb という命名規則を使用します (例: app_en.arb、app_es.arb、app_hi.arb)
  • テンプレート ARB ファイル (app_en.arb) には、すべてのキーに対して @ メタデータを含める必要があります: 
    {
  "loginTitle": "Sign In",
  "@loginTitle": { "description": "Title on the login screen" },
  "itemCount": "{count, plural, =0{No items} =1{1 item} other{{count} items}}",
  "@itemCount": { "description": "Item count with pluralization", "placeholders": { "count": { "type": "int" } } }
}
  • キーの命名: featureName_context 形式を使用します (例: settings_title、login_emailHint)
  • ARB ファイル内で、コメント区切りを使って機能ごとにキーをグループ化します

使用ルール

  • BuildContext 拡張機能を使用して、context.l10n.keyName で文字列にアクセスします
  • コードベース内のどこであっても、ユーザーに表示される文字列をハードコードすることは厳禁です
  • initState() 内やウィジェットツリーの外で .l10n を使用することは厳禁です — context が利用可能でなければなりません
  • 日付・時刻・数値の書式設定には、現在のロケールで intl パッケージのフォーマッターを使用します

複数形および選択形式

  • 数えられる項目には ICU の複数形構文を使用します: {count, plural, =0{...} =1{...} other{...}}
  • 性別やカテゴリには ICU の選択構文を使用します: {gender, select, male{...} female{...} other{...}}
  • フォールバックとして常に other ケースを含めます

RTL サポート

  • Directionality および TextDirection を認識するウィジェットを使用します
  • パディングやマージンには EdgeInsets よりも EdgeInsetsDirectional を優先します
  • MainAxisAlignment および CrossAxisAlignment では left/right ではなく start/end を使用します
  • ウィジェットテスト中に RTL ロケールでテストします

新しい言語の追加

  1. すべてのキーを翻訳した app_{locale}.arb を作成します
  2. flutter gen-l10n を実行します (または自動生成に任せます)
  3. MaterialApp の supportedLocales に Locale を追加します
  4. 新しいロケールを使用してウィジェットテストで検証します

コメント

Markdown 対応