【Flutter】パスワード表示をHooksで切り替える

ぽちぽちのつどいGW Advent(?) Calendar11日目の記事です！

さぁ今日の内容はパスワードの表示と非表示を切り替えたいと思います。
StatelessではなくHooksで書いていこうと思います。

パスワードの表示と非表示を切り替える

Flutter でパスワード入力欄を作るとき、「入力内容を一時的に見えるようにしたい」ってこと、よくありますよね。今回は Flutter Hooksを使って、実装していきます。

👇👇👇👇イメージ👇👇👇👇

まずはテキストコントローラとパスワード,表示非表示の切り替え用bool値の変数を宣言します。

dart

final pass = useState('');
final passController = useTextEditingController();
final isObscure = useState(true);

次にUI側のコードです

dart

TextField(
  obscureText: isObscure.value,
  controller: passController,
  onChanged: (value) {
    pass.value = value;
  },
  decoration: InputDecoration(
    labelText: 'パスワード',
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(8),
    ),
    suffixIcon: IconButton(
      icon: Icon(
        isObscure.value ? Icons.visibility_off : Icons.visibility,
      ),
      onPressed: () {
        isObscure.value = !isObscure.value;
      },
    ),
  ),
),

これで一応実装は完了なんですが
細かく見ていくと

dart

obscureText: isObscure.value,

これが初期値でtrueを指定されていて見えない状態が最初です。suffixIconプロパティで斜線のある目のアイコンと斜線がないアイコンを切り替えています。

dart

suffixIcon: IconButton(
      icon: Icon(
        isObscure.value ? Icons.visibility_off : Icons.visibility,
      ),
      onPressed: () {
        isObscure.value = !isObscure.value;
      },
    ),

onPressedで押された時の処理として!isObscure.valueでtrueかfalseかを判定して逆の物を isObscure変数に格納しています。

なぜ切り替える必要があるの？

現代のアプリでは、パスワードの表示／非表示の切り替え機能はほぼ標準になっています。
そのため、この機能がないとユーザーは「え、これ打ち間違えてないかな？」「見えるようにできないの？」と違和感や不安を感じることがあります。
また、見せる／隠すの切り替えに応じてアイコンを変えている理由は、
ユーザーが現在の状態（表示中 or 非表示中）を直感的に判断できるようにするためです。
つまりこれはただの見た目ではなく、
ユーザーの「安心して入力できる体験」を支える重要なUX要素と言えるわけです。

最後に

以上がHooksで切り替える方法になります。意外とシンプルであることがわかったかなと思います。

というわけで、ぽちぽちのつどいGW Advent(?) Calendar １１日目はパスワード表示をHooksで切り替える話でした！