パスワード表示切替 Password Visibility Toggle

パスワード欄の右にある目のアイコンを押すと、●●● で隠していた文字が見えるようになる。もう一度押すと隠れる。

別名: パスワードの目のアイコンパスワードを表示伏せ字切り替え目のボタンShow PasswordObscure Text
動き: 目のアイコンを押す ●●● が文字に変わる
作り方: 標準ウィジェット Flutter に入っているものだけで作れます

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

別タブで大きく開く ↗

どんなもの？

TextField に obscureText: true を渡すと、打った文字が ● で隠れます。

この値を状態で持ち、suffixIcon に置いた IconButton で切り替えるだけで作れます。

アイコンは「今見えているか」に合わせて visibility / visibility_off を出し分けます。

打ち間違いに気づけるので、確認用にもう一度入力させる欄を省けることもあります。

自動入力（パスワードマネージャー）に対応させるには autofillHints: [AutofillHints.password] を付けます。

こんなときに

パスワード・暗証番号など、隠して入力する欄（ほぼ必ず付ける）

避けたい場面

最初から見える状態にしておく（人前で開く画面では隠すのが基本）

最小コード

TextField(
  obscureText: hidden,
  autofillHints: const [AutofillHints.password],
  decoration: InputDecoration(
    labelText: 'パスワード',
    border: const OutlineInputBorder(),
    suffixIcon: IconButton(
      tooltip: hidden ? '表示する' : '隠す',
      icon: Icon(hidden ? Icons.visibility : Icons.visibility_off),
      onPressed: () => setState(() => hidden = !hidden),
    ),
  ),
)