[flutter] フルUIカスタム の Amplify UI Component を日本語化したかった
koonagi (kohei yamazaki)■ ゴール
UI Componentsのログイン/サインイン画面を日本語化する（フルUIカスタム）
[追記]■ 結果の結論
大変過ぎて途中でやめた
ドキュメントはこのあたりかな
このあたりじゃなかった。フルカスタム以外の場合は以下のリンクで良いけど、フルカスタムの場合は違った。
koonagi (kohei yamazaki)動作確認
サインインボタンが日本語化されるのかと思ったけどされないい。
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'),
),
],
),
],
);
英語で記載したものを日本語化できるのかと思ったけど、フルカスタム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;
}
今更だけど、フルカスタムはstateによって、return区で自分で構造書いてるだけか。
AuthenticatorStepごとにカスタマイズしてあげればいいのか。
koonagi (kohei yamazaki)AuthenticatorStep.signIn ページの日本語化
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)SignUpForm.custom 使ってみる
SignInForm()
SignUpForm.custom(fields: [
SignUpFormField.address(
required: false,
),
])
うむ、変わってる。
koonagi (kohei yamazaki)文字の変え方がわからん...
公式のカスタムUIのテスト見てみると AuthenticatorForm ウィジェット使ってるな。
こっちでもやってみるかー。
koonagi (kohei yamazaki)これ一つひとつ日本語化していくのものすごい労力使う気がしてきた。
ログイン画面に画像入れたかったけど、機能開発の方に時間使いたいから、一旦やめよう。
おとなしくデフォルト画面をローカライズする。