Wie kann ich das Passwort in TextFormField anzeigen / verbergen?

Lesezeit: 5 Minuten

Benutzer-Avatar
Farwa

Aktuell habe ich mein Passwort TextFormField so was:

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

Ich möchte eine schaltflächenähnliche Interaktion, die das Passwort sichtbar und unsichtbar macht. Kann ich das drinnen machen? TextFormField? Oder ich muss eine machen Stack Widget, um meine erforderliche Benutzeroberfläche zu erhalten. Und wie wird die Bedingung bzgl obscureText wahr falsch?

  • Mach einfach true zu dem du übergehst obscureText eine Variable und schalten Sie sie um, zum Beispiel in einer Funktion, die Sie an `onPressed: if a button

    – Günter Zöchbauer

    6. März 2018 um 7:07 Uhr

Machen Sie zuerst Ihr Widget StatefulWidget wenn es ein ist StatelessWidget.

Dann haben Sie eine Variable bool _obscureText und leite es an deine weiter TextFormField. Schalten Sie es mit ein setState nach Bedarf.

Beispiel:

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

Hoffe das hilft!

  • Danke für die Hilfe. Ich habe Stack statt Container verwendet. Das Passwort überschneidet sich also mit der Schaltfläche. Ich habe Polsterung in den FlatButton-Container gelegt. Immer noch überlappend. Irgendeine Idee, wie man das löst?

    – Farwa

    6. März 2018 um 7:32 Uhr

  • Aber warum stapeln? Versuchen Row für horizontale Anordnung u Column für senkrechte Anordnung

    – Hemanth Raj

    6. März 2018 um 7:34 Uhr

  • So wird das Design aussehen: i.stack.imgur.com/q8aQU.png Anstelle des Symbols wird es der FlatButton sein. Weil es oben auf dem TextFormField steht, habe ich Stack verwendet.

    – Farwa

    6. März 2018 um 7:47 Uhr

  • Stack ist nicht erforderlich. InputDecoration hat ein suffixIcon Immobilie, die genau das sein könnte, wonach Sie suchen.

    – Hemanth Raj

    6. März 2018 um 7:56 Uhr

  • Scheint Stack wird noch für Cupertino benötigt? suffixIcon scheint nur für Material zu funktionieren.

    – Peter Alvin

    13. März 2020 um 22:46 Uhr

  • Ich mag deine Lösung. Anstatt GestureDetector und Icon zu verwenden, könnten Sie jedoch IconButton verwenden.

    – Clemsciences

    17. Februar um 11:01 Uhr

  • Ja, die Sache ist, dass ich den Tinteneffekt von IconButton nicht mag und ich weiß, dass Sie ihn jetzt mit Splash/Highlight-Farbeigenschaften deaktivieren können, aber das wusste ich nicht, als ich das gepostet habe.

    – Bugzilla

    18. Februar um 13:06 Uhr

Benutzer-Avatar
Mahesh Jamdade

Nun, ich persönlich halte die Passwörter gerne die ganze Zeit verborgen und sehe sie, wenn Sie sie sehen möchten, also ist dies der Ansatz, den ich verwende, um Passwörter zu verstecken/einzublenden, falls Sie möchten, dass das Passwort sichtbar ist, wenn die Berührung in Kontakt mit dem ist Symbol ausblenden und ausgeblendet, sobald Sie den Kontakt entfernen, dann ist dies für Sie

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

Dieser Ansatz wird in meinen Paketen verwendet
https://pub.dev/packages/passwordfield

Die Ausgabe des obigen Codes

Geben Sie hier die Bildbeschreibung ein


○ Nur 3 einfache Schritte, denen Sie folgen können, und das Ein-/Ausblenden des Passworts ist erledigt.


Geben Sie hier die Bildbeschreibung ein

Schritt 1: Variable erstellen

       bool _isHidden = true;

Schritt 2: Magical Step, machen Sie das Symbol anklickbar und sehen/verbergen Sie das Passwort.

Jetzt werde ich das Symbol mit InkWell umhüllen, wodurch es anklickbar wird. Wenn wir also darauf klicken, wird das obscureText-Argument zwischen wahr und falsch umgeschaltet.

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

Schritt 3: Erstellen Sie die magische Funktion.

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

☻♥Fertig.

Benutzer-Avatar
Hasan A. Yousef

Mit einer Gutschrift geht an X-Weikönnen Sie das Widget separat erstellen 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),
        ),
      ),
    );
  }
}

Nennen Sie es als:

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

1010480cookie-checkWie kann ich das Passwort in TextFormField anzeigen / verbergen?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy