Comment afficher/masquer le mot de passe dans TextFormField?

Question

Actuellement, j'ai mon mot de passe TextFormField comme ceci: 

         new 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,
                          ),

Je veux un bouton comme interaction qui rendra le mot de passe visible et invisible. Puis-je le faire dans TextFormField? Ou je devrai créer un widget Stack pour obtenir l'interface utilisateur requise. Et comment va-t-on conditionner obscureText vrai/faux? 

Answer 1

Commencez par créer votre widget StatefulWidget s'il s'agit d'une StatelessWidget.

Ensuite, ayez une variable bool _obscureText et transmettez-la à votre TextFormField. Basculez-le avec setState si nécessaire.

Exemple:

class _FormFieldSampleState extends State<FormFieldSample> {

  // Initially password is obscure
  bool _obscureText = true;

  String _password;

  // Toggles the password show status
  void _toggle() {
    setState(() {
      _obscureText = !_obscureText;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Sample"),
      ),
      body: new Container(
        child: new Column(
          children: <Widget>[
            new 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: _obscureText,
            ),
            new FlatButton(
                onPressed: _toggle,
                child: new Text(_obscureText ? "Show" : "Hide"))
          ],
        ),
      ),
    );
  }
}

J'espère que cela t'aides!

Answer 2

J'ai créé la solution selon @Hemanth Raj mais d'une manière plus robuste.

Commencez par déclarer une variable boolpasswordVisible.

Initier passwordVisible à false dans initState()

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

Voici le widget 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 = false
                   : passwordVisible = true;
               });
             },
            ),
          ),
        );

J'espère que cela aide quelqu'un !!!

Answer 3

Je l'ai fait en maintenant et en relâchant le longTap:

    bool _passwordVisible;

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

// ...
TextFormField(
  obscureText: !_passwordVisible,
  decoration: InputDecoration(
    hasFloatingPlaceholder: true,
    filled: true,
    fillColor: Colors.white.withOpacity(0.5),
    labelText: "Password",
    suffixIcon: GestureDetector(
      onLongPress: () {
        setState(() {
          _passwordVisible = true;
        });
      },
      onLongPressUp: () {
        setState(() {
          _passwordVisible = false;
        });
      },
      child: Icon(
          _passwordVisible ? Icons.visibility : Icons.visibility_off),
    ),
  ),
  validator: (String value) {
    if (value.isEmpty) {
      return "*Password needed";
    }
  },
  onSaved: (String value) {
    _setPassword(value);
  },
);

Answer 4

Avec un crédit allant à X-Wei , vous pouvez créer le widget en tant que password.Dart séparé: 

import 'package:flutter/material.Dart';

class PasswordField extends StatefulWidget {
  const PasswordField({
    this.fieldKey,
    this.hintText,
    this.labelText,
    this.helperText,
    this.onSaved,
    this.validator,
    this.onFieldSubmitted,
  });

  final Key fieldKey;
  final String hintText;
  final String labelText;
  final String helperText;
  final FormFieldSetter<String> onSaved;
  final FormFieldValidator<String> validator;
  final ValueChanged<String> onFieldSubmitted;

  @override
  _PasswordFieldState createState() => new _PasswordFieldState();
}

class _PasswordFieldState extends State<PasswordField> {
  bool _obscureText = true;

  @override
  Widget build(BuildContext context) {
    return new TextFormField(
      key: widget.fieldKey,
      obscureText: _obscureText,
      maxLength: 8,
      onSaved: widget.onSaved,
      validator: widget.validator,
      onFieldSubmitted: widget.onFieldSubmitted,
      decoration: new InputDecoration(
        border: const UnderlineInputBorder(),
        filled: true,
        hintText: widget.hintText,
        labelText: widget.labelText,
        helperText: widget.helperText,
        suffixIcon: new GestureDetector(
          onTap: () {
            setState(() {
              _obscureText = !_obscureText;
            });
          },
          child:
          new Icon(_obscureText ? Icons.visibility : Icons.visibility_off),
        ),
      ),
    );
  }
}

Appelez ça comme:

  import 'package:my_app/password.Dart';

  String _password;
  final _passwordFieldKey = GlobalKey<FormFieldState<String>>();

  PasswordField(
    fieldKey: _passwordFieldKey,
    helperText: 'No more than 8 characters.',
    labelText: 'Password *',
    onFieldSubmitted: (String value) {
      setState(() {
        this._password = value;
      });
    },
  ),