@yamada0088posted at 2023-01-04

【Flutter】TextFormFieldでのパスワードの表示／非表示させたいのですが、できません。どなたかアドバイスいただけないでしょうか。

Q&A

解決したいこと

よくあるパスワード入力時の表示／非表示をIconButtonを押すことで変化させたいのですが、サイトを真似しただけだと初期状態（非表示）から表示状態へ移行できません。
簡単なソースなのですが、原因がわからずこちらで質問させていただきました。
どうすれば、表示／非表示をIconButtonを押すことで変化させることができるのでしょうか。

該当するソースコード

/// bool _isObscure = true;と上で定義しています。
              child: TextFormField(
                obscureText: _isObscure,
                decoration: InputDecoration(
                  suffixIcon: _isObscure != true
                      ? IconButton(
                          icon: const Icon(Icons.visibility),
                          onPressed: () {
                            setState(() {
                              _isObscure = !_isObscure;
                            });
                          },
                        )
                      : IconButton(
                          icon: const Icon(Icons.visibility_off),
                          onPressed: () {
                            setState(() {
                              _isObscure = !_isObscure;
                            });
                          },
                        ),

///ここから下は関係ないかもしれません
                  fillColor: Colors.white,
                  filled: true,
                  focusedBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(15),
                      topRight: Radius.circular(15),
                      bottomLeft: Radius.circular(15),
                      bottomRight: Radius.circular(15),
                    ),
                    borderSide: const BorderSide(
                      color: Colors.black,
                      width: 0.0006,
                    ),
                  ),
                  enabledBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(15),
                      topRight: Radius.circular(15),
                      bottomLeft: Radius.circular(15),
                      bottomRight: Radius.circular(15),
                    ),
                    borderSide: BorderSide(
                      color: Colors.black,
                      width: 0.0006,
                    ),
                  ),
                ),
              ),

3Answer

@YumaInaura posted at 2023-01-04

以下で試しましたが普通に動作しますね



import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Dem o',
      theme: ThemeData.light(),
      home: MainPage(),
    );
  }
}

class MainPage extends StatefulWidget {
  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  bool _isObscure = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sample App'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(32.0),
        child: Center(
          child: TextFormField(
            obscureText: _isObscure,
            decoration: InputDecoration(
              labelText: 'Password',
              suffixIcon: _isObscure != true
                      ? IconButton(
                          icon: const Icon(Icons.visibility),
                          onPressed: () {
                            setState(() {
                              _isObscure = !_isObscure;
                            });
                          },
                        ) : IconButton(
                          icon: const Icon(Icons.visibility_off),
                          onPressed: () {
                            setState(() {
                              _isObscure = !_isObscure;
                            });
                          },
                        ),
            ),
          ),
        ),
      ),
    );
  }
}

1Like

Comments

@yamada0088
Questioner
回答ありがとうございます。
自分はまだできないので環境の問題なんですかね、、、
もうちょっと調べてみます。
ソースまで貼っていただいてありがとうございました。
@YumaInaura
動作が再現できるコード全体を載せてみませんか？ (1ファイルで)

@yamada0088 posted at 2023-01-05

デバッグしたところ、
「 _isObscure = !_isObscure;」
が実行されていない（？）ように見えているのですが、これは通常なのでしょうか。

【ステップ実行】

0Like

Comments

@yamada0088
Questioner
「 _isObscure = !_isObscure;」
ではなく、正確には
「 _isObscureNewRe = !_isObscureNewRe;」
でした。

@yamada0088 posted at 2023-01-05

[自己解決]
各vsibilityアイコンのフラッグ（isObscureNewなど）をメンバー変数にしたら上手く動作しました。
回答してくださった方ありがとうございました。

0Like

Are you sure you want to delete the question?

【Flutter】TextFormFieldでのパスワードの表示／非表示させたいのですが、できません。どなたかアドバイスいただけないでしょうか。

解決したいこと

該当するソースコード

3Answer

Comments

Comments

Your answer might help someone💌