ログイン画面 Login Screen

メールとパスワードを入れてログインする画面。新規登録との切り替えや、Google などでのログインボタンも並ぶ。

別名: サインイン画面ログインフォーム会員登録画面サインアップGoogle でログインソーシャルログインSign InFirebase UI for Auth
動き: ログインと新規登録を切り替え押すと読み込み中になる
作り方: 自作標準ウィジェットの組み合わせで自分で作ります

本物の Flutter ウィジェットが動きます（初回は数秒かかります）

別タブで大きく開く ↗

どんなもの？

入力欄・送信ボタン・パスワードを忘れたとき・ほかの方法でログイン、の4つでできています。

Form と TextFormField で入力チェックを行い、AutofillGroup で包むとパスワードマネージャーの自動入力が効きます。

ログインと新規登録は同じ画面で切り替えると、間違えて入ってきた人も迷いません。

送信中はボタンを読み込み表示にして、二重に押されないようにします。

Firebase を使うなら、Flutter チームの firebase_ui_auth の SignInScreen 1つで、

メール・Google・Apple などのログインや「パスワードを忘れた」画面までまとめて用意されます（Firebase の設定が必要なので、このデモは手作りです）。

こんなときに

アカウントのあるアプリの入口

避けたい場面

アプリを開いてすぐ、何も見せずにログインを求める（先に中身を見せる方が離脱しにくい）

最小コード

AutofillGroup(
  child: Form(
    key: formKey,
    child: Column(children: [
      TextFormField(
        autofillHints: const [AutofillHints.email],
        decoration: const InputDecoration(labelText: 'メールアドレス'),
        validator: (v) => v!.contains('@') ? null : 'メールアドレスを入力してください',
      ),
      TextFormField(
        obscureText: true,
        autofillHints: const [AutofillHints.password],
        decoration: const InputDecoration(labelText: 'パスワード'),
      ),
      FilledButton(onPressed: signIn, child: const Text('ログイン')),
      OutlinedButton.icon(
        onPressed: signInWithGoogle,
        icon: const Icon(Icons.g_mobiledata),
        label: const Text('Google でログイン'),
      ),
    ]),
  ),
)

// Firebase UI for Auth なら（Firebase の設定済みが前提）
SignInScreen(providers: [EmailAuthProvider()])