動作確認

サインインボタンが日本語化されるのかと思ったけどされないい。

koonagi (kohei yamazaki)

オーバーライドの仕組みがわからん、、、
main.dartにTEXTで記載してるから反映されないのかな。
そもそも、やり方間違ってる気がしてきた。

      case AuthenticatorStep.signUp:
        return Scaffold(
          body: Padding(
            padding: padding
            child: SingleChildScrollView(
              child: Column(
                children: [
                  // app logo
                  const Center(child: FlutterLogo(size: 100)),
                  // prebuilt sign up form from amplify_authenticator package
                  SignUpForm(),
                ],
              ),
            ),
          ),
          // custom button to take the user to sign in
          persistentFooterButtons: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Text('Already have an account?'),
                TextButton(
                  onPressed: () => state.changeStep(
                    AuthenticatorStep.signIn,
                  ),
                  child: const Text('Sign In'),
                ),
              ],
            ),
          ],
        );

koonagi (kohei yamazaki)

英語で記載したものを日本語化できるのかと思ったけど、フルカスタムUIの書き方だとやり方が違うのかも。

koonagi (kohei yamazaki)

This example uses several prebuilt widgets from the amplify_authenticator package, such as SignInForm(), SignUpForm(), SignInFormField.username(), and SignInButton(). All of the prebuilt widgets are integrated into the authenticator's state, meaning that you do not have to add an onChanged callback for the Form Fields, or an onTap callback for the Buttons. You can find a full list of the prebuilt forms, form fields, and buttons in the API docs.

この例では、amplify_authenticator パッケージの SignInForm(), SignUpForm(), SignInFormField.username(), SignInButton() などのプリビルトウィジェットを使用します。すべてのプリビルドウィジェットは認証機能に統合されているので、フォームフィールドの onChanged コールバックや、ボタンの onTap コールバックを追加する必要はありません。プリビルドされたフォーム、フォームフィールド、ボタンの完全なリストは、API ドキュメントを参照してください。

koonagi (kohei yamazaki)

見えている範囲でまずは英語になってるのを日本語化して、まだ英語で表示されているものを一つ一つ潰していくか。

koonagi (kohei yamazaki)

AuthenticatorStep の設定を書き換える

一部だけ書き換わった。

        switch (state.currentStep) {
          case AuthenticatorStep.signIn:
            return Scaffold(
              body: Padding(
                padding: padding,
                child: SingleChildScrollView(
                  child: Column(
                    children: [
                      // app logo
                      Center(child: Image.asset('img/AIry_logo.png')),
                      // prebuilt sign in form from amplify_authenticator package
                      SignInForm(),
                    ],
                  ),
                ),
              ),
              // custom button to take the user to sign up
              persistentFooterButtons: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    const Text('アカウントがありませんか?'),
                    TextButton(
                      onPressed: () => state.changeStep(
                        AuthenticatorStep.signUp,
                      ),
                      child: const Text('アカウントを作成'),
                    ),
                  ],
                ),
              ],
            );
          case AuthenticatorStep.signUp:
            return Scaffold(
              body: Padding(
                padding: padding,
                child: SingleChildScrollView(
                  child: Column(
                    children: [
                      // app logo
                      const Center(child: FlutterLogo(size: 100)),
                      // prebuilt sign up form from amplify_authenticator package
                      SignUpForm(),
                    ],
                  ),
                ),
              ),
              // custom button to take the user to sign in
              persistentFooterButtons: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    const Text('アカウントをお持ちですか？'),
                    TextButton(
                      onPressed: () => state.changeStep(
                        AuthenticatorStep.signIn,
                      ),
                      child: const Text('ログイン),
                    ),
                  ],
                ),
              ],
            );
          default:
            // returning null defaults to the prebuilt authenticator for all other steps
            return null;
        }

koonagi (kohei yamazaki)

今更だけど、フルカスタムはstateによって、return区で自分で構造書いてるだけか。
AuthenticatorStepごとにカスタマイズしてあげればいいのか。

koonagi (kohei yamazaki)

SignInForm() を呼び出しているから、カスタマイズ。

ドキュメントはこれか。

const SignInForm.custom({
  Key? key,
  required List<SignInFormField> fields,
  bool includeDefaultSocialProviders = true,
}) : super._(
        key: key,
        fields: fields,
        actions: const [
          SignInButton(),
          ForgotPasswordButton(),
        ],
        includeDefaultSocialProviders: includeDefaultSocialProviders,
      );

koonagi (kohei yamazaki)

パッケージの中身はこれ。

koonagi (kohei yamazaki)

SignUpForm.custom 使ってみる

SignInForm()

SignUpForm.custom(fields: [
SignUpFormField.address(
required: false,
),
])

うむ、変わってる。

koonagi (kohei yamazaki)

文字の変え方がわからん...

公式のカスタムUIのテスト見てみると AuthenticatorForm ウィジェット使ってるな。
こっちでもやってみるかー。

koonagi (kohei yamazaki)

これ一つひとつ日本語化していくのものすごい労力使う気がしてきた。
ログイン画面に画像入れたかったけど、機能開発の方に時間使いたいから、一旦やめよう。

おとなしくデフォルト画面をローカライズする。

動作確認

AuthenticatorStep の設定を書き換える

AuthenticatorStep.signIn ページの日本語化