【Flutter】目のアイコンでパスワードの表示を切り替える

2023年12月6日

この記事はこんな人におすすめ！

目のマークのアイコンでパスワードの表示を切り替えたい

今回はTextFieldまたはTextFormFieldで表示される文字（パスワード）を目のマークのアイコンボタンをタップして表示切り替えする方法を紹介します。

TextFieldのパスワードを目のアイコンで表示切り替え

TextFieldのobscureTextに真偽値を定義した変数を渡し、目のマークのアイコンがタップされるたびに変数の値を更新してパスワードの表示・非表示を更新するようにします。

TextFieldに目のマークのアイコンボタンを表示するにはIconButtonを実装します。

IconButtonのIconでは三項演算子を使って変数の値によってアイコンの表示を切り替えるよう設定し、onPressedではボタンがタップされたら変数の値を更新するよう設定します。

//obscureTextで使用する変数を定義
bool _isObscure = true;

TextField(
  obscureText: _isObscure,
  decoration: InputDecoration(
    suffixIcon: IconButton(
      icon: Icon(
        _isObscure ? Icons.visibility : Icons.visibility_off,
      ),
      onPressed: () {
        setState(
          () => _isObscure = !_isObscure,
        );
      },
    ),
  ),
)

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _isObscure = true;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Flutter')),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(20.0),
            child: TextField(
              obscureText: _isObscure,
              decoration: InputDecoration(
                suffixIcon: IconButton(
                  icon: Icon(
                    _isObscure ? Icons.visibility : Icons.visibility_off,
                  ),
                  onPressed: () {
                    setState(
                      () => _isObscure = !_isObscure,
                    );
                  },
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

【Flutter】目のアイコンでパスワードの表示を切り替える

TextFieldのパスワードを目のアイコンで表示切り替え

サンプルコード

参考サイト