【Flutter】パスワードの表示・非表示の実装方法

Flutterでパスワードの表示・非表示を実装する

初投稿です。最近趣味でFlutterを始めました。
プログラミング未経験なので、アウトプットも兼ねてQiitaを書いていこうと思います。
（挫折しないように頑張ろう）

内容

今日はパスワード入力フォームでよく見るパスワードの表示・非表示をFlutterで作ってみました。
こんな感じです。

コード全体

main.dart

class _MyHomePageState extends State<MyHomePage> {
  bool isDisplay = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('パスワードの表示/非表示'),
      ),
      body: Center(
          child: TextFormField(
        obscureText: isDisplay,
        decoration: InputDecoration(
          suffixIcon: isDisplay != true
              ? IconButton(
                  icon: Icon(Icons.visibility),
                  onPressed: () {
                    setState(() {
                      isDisplay = !isDisplay;
                    });
                  },
                )
              : IconButton(
                  icon: Icon(Icons.visibility_off),
                  onPressed: () {
                    setState(() {
                      isDisplay = !isDisplay;
                    });
                  },
                ),
        ),
      )),
    );
  }
}

今回はstatefulwidgetで状態管理を行っているので、setStateで状態を更新します。
まず、TextFieldを表示し、非表示化しておきます。

main.dart

    return Scaffold(
      appBar: AppBar(
        title: Text('パスワードの表示/非表示'),
      ),
      body: Center(
          child: TextField(
        obscureText: true,
      )),
    );

obscureText: trueでTextFieldを非表示にできます。
次に論理型を宣言しておきます。今回はisDisplayとします。

bool isDisplay = true;

宣言したらobscureTextに格納

obscureText: isDisplay;

次にTextFieldにアイコンを表示するのですが、ボタンを押したときに状態を更新したのでIconButtonを記述

main.dart

      body: Center(
          child: TextField(
        obscureText: isDisplay,
        decoration: InputDecoration(
          suffixIcon: isDisplay != true
              ? IconButton(
                  icon: Icon(Icons.visibility),
                  onPressed: () {
                    setState(() {},
                )
              : IconButton(
                  icon: Icon(Icons.visibility_off),
                  onPressed: () {},
                ),
        ),
      )),
    );

三項演算子をを用いてisDisplayがfalseの場合には目が開いているアイコン。isDisplayがtrueの場合には目が閉じているアイコンを表示するように記述。
（widget内で条件分岐させるときは三項演算子か即時関数で記述する必要があるらしい）

最後にsetStateでボタンを押したときの状態を変更します。

main.dart

                  onPressed: () {
                    setState(() {
                      isDisplay = !isDisplay;
                    });
                  },

以上です。

そんなん簡単だわ！！って感じですが、自分にとってはかなり良い勉強になりました。
これからアプリ開発を通してFlutterの勉強を頑張っていきます。