¿Cómo mostrar/ocultar la contraseña en TextFormField?

Actualmente tengo mi contraseña TextFormField Me gusta esto:

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

Quiero un botón como interacción que haga que la contraseña sea visible e invisible. ¿Puedo hacerlo dentro? TextFormField? O tendré que hacer un Stack widget para obtener mi interfaz de usuario requerida. ¿Y cómo se hará la condición respecto obscureText ¿verdadero Falso?

Primero haz tu widget StatefulWidget si es un StatelessWidget.

Entonces tiene una variable bool _obscureText y pásalo a tu TextFormField. El alternarlo con setState según sea necesario.

Ejemplo:

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"))
          ],
        ),
      ),
    );
  }
}

¡Espero que esto ayude!

Bueno, personalmente me gusta mantener las contraseñas ocultas todo el tiempo y verlas cuando quieres verlas, así que este es el enfoque que utilizo para ocultar/mostrar contraseñas, en caso de que quieras que la contraseña sea visible cuando el toque esté en contacto con el Ocultar icono y ocultar tan pronto como elimine el contacto, entonces esto es para usted.

//make it invisible globally
  bool invisible = true;

//wrap your toggle icon in Gesture Detector
  GestureDetector(
   onTapDown: inContact,//call this method when incontact
   onTapUp: outContact,//call this method when contact with screen is removed
   child: Icon(
   Icons.remove_red_eye,
   color: colorButton,
   ),
  ),

  void inContact(TapDownDetails details) {
    setState(() {
      invisible = false;
    });
  }

  void outContact(TapUpDetails details) {
    setState(() {
      invisible=true;
    });
  }

Este enfoque se está utilizando en mis paquetes.
https://pub.dev/packages/contraseñacampo

La salida del código anterior

○ Solo 3 pasos simples que puede seguir y la contraseña Mostrar / Ocultar hecho.

Paso 1: crear variable

       bool _isHidden = true;

Paso 2: Paso mágico, haga que se pueda hacer clic en el icono y vea/oculte la contraseña.

Ahora envolveré el ícono con InkWell, lo que hará que se pueda hacer clic. Entonces, cuando hagamos clic en eso, el argumento darkText alternará entre verdadero y falso.

 @override
   Widget build(BuildContext context) {
     return Scaffold(
        backgroundColor: Theme.of(context).secondaryHeaderColor,
          body: Center(
            child: Container(
            height: 55,
            alignment: Alignment.center,
            padding: EdgeInsets.fromLTRB(10, 10, 10, 0),
            child: TextField(
              obscureText: _isHidden,
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Password',
                suffix: InkWell(
                  onTap: _togglePasswordView,  /// This is Magical Function
                  child: Icon(
                    _isHidden ?         /// CHeck Show & Hide.
                     Icons.visibility :
                     Icons.visibility_off,
                  ),
                ),
                /*icon: Icon(
                  Icons.password_sharp,
                  color: Colors.black,
                ),*/
              ),
            ),
          ),
        ),
     );
  }

Paso 3: Crea esta función mágica.

      void _togglePasswordView() {
    setState(() {
        _isHidden = !_isHidden;
    });
}
  

☻♥ Listo.

Con un crédito va a X-Weipuede crear el widget por separado password.dart:

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),
        ),
      ),
    );
  }
}

Llámalo como:

  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;
      });
    },
  ),