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

5 minutos de lectura

avatar de usuario
Farwa

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?

  • Solo hazlo true que pasas a obscureText una variable y cambiarla, por ejemplo, en una función que pasa a `onPressed: si un botón

    – Günter Zöchbauer

    6 de marzo de 2018 a las 7:07

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!

  • Gracias por la ayuda. Usé Stack en lugar de contenedor. Entonces la contraseña se superpone con el botón. Puse relleno dentro del contenedor FlatButton. Todavía superpuestos. ¿Alguna idea de cómo resolver eso?

    – Farwa

    6 de marzo de 2018 a las 7:32

  • Pero ¿por qué apilar? Tratar Row para disposición horizontal y Column para disposición vertical

    -Hemanth Raj

    6 de marzo de 2018 a las 7:34

  • Así será el diseño: i.stack.imgur.com/q8aQU.png En lugar del ícono, será FlatButton. Como es la parte superior de TextFormField, utilicé Stack.

    – Farwa

    6 de marzo de 2018 a las 7:47

  • No hay necesidad de Stack. InputDecoration tiene un suffixIcon propiedad que podría ser exactamente lo que está buscando.

    -Hemanth Raj

    6 de marzo de 2018 a las 7:56

  • ¿Parece que todavía se necesita Stack para Cupertino? suffixIcon parece funcionar solo para Material.

    –Pete Alvin

    13 de marzo de 2020 a las 22:46

  • Me gusta tu solución. Sin embargo, en lugar de usar GestureDetector e Icon, puede usar IconButton.

    – clemciencias

    17 de febrero a las 11:01

  • Sí, la cuestión es que no me gusta el efecto de tinta de IconButton y sé que ahora puedes desactivarlo con las propiedades de color de salpicadura/resaltado, pero no lo sabía cuando publiqué esto.

    – Bugzilla

    18 de febrero a las 13:06

avatar de usuario
Mahesh Jamdade

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

ingrese la descripción de la imagen aquí


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


ingrese la descripción de la imagen aquí

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.

avatar de usuario
Hasan A Yousef

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

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad