☰

TextFormField でパスワードを表示/非表示にするにはどうすればいいですか? 質問する

tag-icon • tag-icon android dart flutter
TextFormField でパスワードを表示/非表示にするにはどうすればいいですか? 質問する

現在、私のパスワードはTextFormField次のようになっています:

TextFormField(
  decoration: const InputDecoration(
      labelText: 'Password',
      icon: const Padding(
        padding: const EdgeInsets.only(top: 15.0),
        child: const Icon(Icons.lock),
      )),
  validator: (val) => val.length < 6 ? 'Password too short.' : null,
  onSaved: (val) => _password = val,
  obscureText: true,
);

パスワードを表示または非表示にするボタンのようなインタラクションが必要です。 内部で実行できますかTextFormField? または、必要な UI を取得するにはウィジェットを作成する必要がありますStack。 また、true/false に関する条件はどのように作成されますかobscureText?

ベストアンサー1

私は @Hemanth Raj のとおり、より堅牢な方法でソリューションを作成しました。

まずbool変数を宣言します_passwordVisible。

開始_passwordVisibleするfalse​initState()

@override
  void initState() {
    _passwordVisible = false;
  }

ウィジェットは次のとおりですTextFormField:

TextFormField(
   keyboardType: TextInputType.text,
   controller: _userPasswordController,
   obscureText: !_passwordVisible,//This will obscure text dynamically
   decoration: InputDecoration(
       labelText: 'Password',
       hintText: 'Enter your password',
       // Here is key idea
       suffixIcon: IconButton(
            icon: Icon(
              // Based on passwordVisible state choose the icon
               _passwordVisible
               ? Icons.visibility
               : Icons.visibility_off,
               color: Theme.of(context).primaryColorDark,
               ),
            onPressed: () {
               // Update the state i.e. toogle the state of passwordVisible variable
               setState(() {
                   _passwordVisible = !_passwordVisible;
               });
             },
            ),
          ),
        );

おすすめ記事