【Flutter】ローカライズ対応(flutter_localizations)

この記事について

Flutterのアプリのローカライズ対応をJAとUSに対応するサンプル

設定方法

STEP.1

パッケージの導入

pubspec.yamlに以下のコードを追加する

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  # -----ローカライズを利用する記述-----
  flutter_localizations:
    sdk: flutter

STEP.2

main.dartにコードの追加

main.dart

void main() {
  runApp(MaterialApp(
    // ...
    supportedLocales: const [
      Locale('en'),
      Locale('ja'),
    ],
    localizationsDelegates: const [
      AppLocalizations.delegate,
      GlobalMaterialLocalizations.delegate,
      GlobalWidgetsLocalizations.delegate,
      GlobalCupertinoLocalizations.delegate,
    ],
    // ...
  ));
}

STEP.3

AppLocalizations.dartを作成する

File > New > Dart File

AppLocalizations.dart

import 'package:flutter/material.dart';

class LocalizeKey {
  // それぞれの画面の任意のキー名を追加していく
  final String mainAppBarTitle;
  final String mainAppBarRightItem;

  LocalizeKey({
    // MainPage
    required this.mainAppBarTitle,
    required this.mainAppBarRightItem,
  });

  factory LocalizeKey.of(Locale locale) {
    switch (locale.languageCode) {
      case 'ja':
        return LocalizeKey.ja();
      case 'en':
        return LocalizeKey.en();
      default:
        return LocalizeKey.en();
   }

  factory LocalizeKey.ja() =>
      LocalizeKey(
        // それぞれの画面の任意のキーに対応する値(日本語)を追加していく
        mainAppBarTitle: 'メインタイトル',
        mainAppBarRightItem: 'ヘルプ',
   );

  factory LocalizeKey.en() =>
      LocalizeKey(
        // それぞれの画面の任意のキーに対応する値(英語)を追加していく
        mainAppBarTitle: 'MainTitle',
        mainAppBarRightItem: 'Help',
  );
}

class AppLocalizations {
  late final LocalizeKey localizeKey;

  AppLocalizations(Locale locale) {
    localizeKey = LocalizeKey.of(locale);
  }

  static LocalizeKey of(BuildContext context) {
    return Localizations.of(context, AppLocalizations)!.localizeKey;
  }

  static const LocalizationsDelegate delegate = AppLocalizationsDelegate();
}

class AppLocalizationsDelegate extends LocalizationsDelegate {
  const AppLocalizationsDelegate();

  @override
  bool isSupported(Locale locale) {
    return ['en', 'ja'].contains(locale.languageCode);
  }

  @override
  Future load(Locale locale) async {
    return AppLocalizations(locale);
  }

  @override
  bool shouldReload(AppLocalizationsDelegate old) {
    return false;
  }
}

メモ

このAppLocalizations.dartという名前は任意の名前で大丈夫です。

使い方

各ウィジェットなどの文字を利用する箇所で以下のように書く

import 'package:arisan/Utilities/AppLocalizations.dart';

Center(
  child: Text(
    AppLocalizations.of(context).informationAppBarTitle,
  ),
),

2022/8/9