Zenn
🗾

FlutterFire UIを日本語で表示

2021/12/23に公開
Flutter
tech

はじめに

2021年12月にFlutterFire UI(flutterfire_ui)が公開されました。
FlutterFire UIを使用すれば、ログイン画面(SignInScreen)やアカウント登録画面(RegisterScreen)など自分で構築することなく簡単に作成することができます。
ただ、日本語での表示は別途対応が必要なので、実際に試した内容を投稿します。

環境

  • Flutter 2.8.1
  • flutterfire_ui 0.3.0

画面イメージ

SignInScreen RegisterScreen
日本語
英語

日本語の表示方法

https://firebase.flutter.dev/docs/ui/auth/localization

If you need to support multiple languages – follow the official flutter localization guide and make sure that your custom delegate extends LocalizationsDelegate<FlutterFireUILocalizations>.

公式ドキュメントにあるように、LocalizationsDelegate<FlutterFireUILocalizations>を継承したクラスを作成し、それを使用します。

FlutterFireUIJaLocalizationsDelegate

class FlutterFireUIJaLocalizationsDelegate
    extends LocalizationsDelegate<FlutterFireUILocalizations> {
  @override
  bool isSupported(Locale locale) {
    return locale.languageCode == 'ja';
  }

  @override
  Future<FlutterFireUILocalizations<FlutterFireUILocalizationLabels>> load(
      Locale locale) {
    final flutterFireUILocalizations =
        FlutterFireUILocalizations(locale, FlutterFireUIJaLocalizationLabels());
    return SynchronousFuture<FlutterFireUILocalizations>(
        flutterFireUILocalizations);
  }

  @override
  bool shouldReload(
      covariant LocalizationsDelegate<
              FlutterFireUILocalizations<FlutterFireUILocalizationLabels>>
          old) {
    return false;
  }
}

class FlutterFireUIJaLocalizationLabels
    extends FlutterFireUILocalizationLabels {
  @override
  String get emailInputLabel => 'メールアドレス';

  @override
  String get passwordInputLabel => 'パスワード';

  @override
  String get signInActionText => 'ログイン';

  @override
  String get registerActionText => 'アカウント登録';

  @override
  String get linkEmailButtonText => '次へ';

  @override
  String get signInButtonText => 'ログイン';

  @override
  String get registerButtonText => 'アカウント登録';

  @override
  String get signInWithPhoneButtonText => '電話番号でログイン';

  @override
  String get signInWithGoogleButtonText => 'Googleでログイン';

  @override
  String get signInWithAppleButtonText => 'Appleでログイン';

  @override
  String get signInWithFacebookButtonText => 'Facebookでログイン';

  @override
  String get signInWithTwitterButtonText => 'Twitterでログイン';

  @override
  String get phoneVerificationViewTitleText => '電話番号を入力';

  @override
  String get verifyPhoneNumberButtonText => '次へ';

  @override
  String get verifyCodeButtonText => '確認';

  @override
  String get verifyingPhoneNumberViewTitle => 'SMSに記載されたコードを入力';

  @override
  String get unknownError => '不明なエラーが発生しました';

  @override
  String get smsAutoresolutionFailedError =>
      'SMSコードの自動解決に失敗しました。コードを手動で入力してください。';

  @override
  String get smsCodeSentText => 'SMSコード送信';

  @override
  String get sendingSMSCodeText => 'SMSコード送信中...';

  @override
  String get verifyingSMSCodeText => 'SMSコードの確認中...';

  @override
  String get enterSMSCodeText => 'SMSコードを入力';

  @override
  String get emailIsRequiredErrorText => 'メールアドレスは必須です';

  @override
  String get isNotAValidEmailErrorText => '有効なメールアドレスを入力してください';

  @override
  String get userNotFoundErrorText => 'アカウントは存在しません';

  @override
  String get emailTakenErrorText => '入力されたメールアドレスのアカウントはすでに存在しています';

  @override
  String get accessDisabledErrorText => 'このアカウントへのアクセスは一時的に無効化されました';

  @override
  String get wrongOrNoPasswordErrorText => 'パスワードが無効です';

  @override
  String get signInText => 'ログイン';

  @override
  String get registerText => 'アカウント登録';

  @override
  String get registerHintText => 'アカウントをお持ちでない方はこちら';

  @override
  String get signInHintText => 'すでにアカウントをお持ちの方はこちら';

  @override
  String get signOutButtonText => 'ログアウト';

  @override
  String get phoneInputLabel => '電話番号';

  @override
  String get phoneNumberIsRequiredErrorText => '電話番号は必須です';

  @override
  String get phoneNumberInvalidErrorText => '電話番号が無効です';

  @override
  String get profile => 'プロフィール';

  @override
  String get name => '名前';

  @override
  String get deleteAccount => 'アカウント削除';

  @override
  String get passwordIsRequiredErrorText => 'パスワードは必須です';

  @override
  String get confirmPasswordIsRequiredErrorText => 'パスワードを確認する';

  @override
  String get confirmPasswordDoesNotMatchErrorText => 'パスワードが一致しません';

  @override
  String get confirmPasswordInputLabel => 'パスワード（確認用）';

  @override
  String get forgotPasswordButtonLabel => 'パスワードを忘れた方はこちら';

  @override
  String get forgotPasswordViewTitle => 'パスワードを忘れた方';

  @override
  String get resetPasswordButtonLabel => 'パスワードリセット';

  @override
  String get verifyItsYouText => 'あなたであることを確認する';

  @override
  String get differentMethodsSignInTitleText => '次のいずれかの方法でサインインしてください';

  @override
  String get findProviderForEmailTitleText => '続行するには、メールアドレスを入力してください';

  @override
  String get continueText => '続ける';

  @override
  String get countryCode => 'コード';

  @override
  String get codeRequiredErrorText => '国コードは必須です';

  @override
  String get invalidCountryCode => '無効なコード';

  @override
  String get chooseACountry => '国を選択してください';

  @override
  String get enableMoreSignInMethods => 'より多くのログイン方法を有効にする';

  @override
  String get signInMethods => 'ログイン方法';

  @override
  String get provideEmail => 'メールアドレスとパスワードを入力してください';

  @override
  String get goBackButtonLabel => '戻る';

  @override
  String get passwordResetEmailSentText =>
      'パスワードをリセットするためのリンクを記載したメールを送信しました。メールをご確認ください。';

  @override
  String get forgotPasswordHintText => 'パスワードをリセットするためのリンクを送信します';

  @override
  String get emailLinkSignInButtonLabel => 'マジックリンクでログイン';

  @override
  String get signInWithEmailLinkViewTitleText => 'マジックリンクでログイン';

  @override
  String get signInWithEmailLinkSentText =>
      'マジックリンクが記載された電子メールを送信しました。メールをご確認の上、リンクからサインインしてください。';

  @override
  String get sendLinkButtonLabel => 'マジックリンクの送信';

  @override
  String get arrayLabel => 'array';

  @override
  String get booleanLabel => 'boolean';

  @override
  String get mapLabel => 'map';

  @override
  String get nullLabel => 'null';

  @override
  String get numberLabel => 'number';

  @override
  String get stringLabel => 'string';

  @override
  String get typeLabel => 'type';

  @override
  String get valueLabel => 'value';

  @override
  String get cancelLabel => 'キャンセル';

  @override
  String get updateLabel => '更新';

  @override
  String get northInitialLabel => 'N';

  @override
  String get southInitialLabel => 'S';

  @override
  String get westInitialLabel => 'W';

  @override
  String get eastInitialLabel => 'E';

  @override
  String get timestampLabel => 'timestamp';

  @override
  String get latitudeLabel => 'longitude';

  @override
  String get longitudeLabel => 'latitude';

  @override
  String get geopointLabel => 'geopoint';

  @override
  String get referenceLabel => 'reference';
}

日本語の内容は、適切な文言へ変更ください。

MaterialApp localizationsDelegatesに設定

MaterialApp.router(
  localizationsDelegates: [
    ...L10n.localizationsDelegates,
    FlutterFireUILocalizations.delegate,
    FlutterFireUIJaLocalizationsDelegate()
  ],
  supportedLocales: L10n.supportedLocales,
  locale: locale,
  // 以下省略

上記のように、localizationsDelegatesにFlutterFireUIJaLocalizationsDelegateを設定します。
（L10nは、flutter_localizationsで自動生成されたものです）

まとめ

FlutterFire UIで用意されたログイン画面・アカウント登録画面を日本語で表示することができました。
特別な要件などなければ、FlutterFire UI + 日本語表示もいかがでしょうか。

Discussion