CODEWITHSUNDEEP
flutterdart
EL AYADI FATIMAEZZAHRA
EL AYADI FATIMAEZZAHRA

Reputation: 21

How to show/hide password in TextField? FLUTTER

TextField(
   keyboard Type: TextInputType.emailAddress,
   decoration: InputDecoration(
   border: OutlineInputBorder(
   borderRadius: BorderRadius.circular(8.0),
   borderSide: BorderSide.none),
   filled: true,
   hintText: "Mot de passe",
   prefixIcon: Icon(
   Icons.lock,
   color: Color(0xfff28800),
  ),
 ),
),

this is my code and I want to add the icon that control the show/hide password in flutter

Upvotes: 1

Views: 1479

Answers (2)

pmatatias
pmatatias

Reputation: 4454

Live demo on dartpad

// define value
bool _isObscure = true;
...

//then in your form use like this
TextField(
obscureText: _isObscure,
decoration: InputDecoration(
  border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(8.0),
      borderSide: BorderSide.none),
  filled: true,
  hintText: "Mot de passe",
  prefixIcon: Icon(
    Icons.lock,
    color: Color(0xfff28800),
  ),
  suffix: IconButton(
    padding: const EdgeInsets.all(0),
    iconSize: 20.0,
    icon: _isObscure
        ? const Icon(
            Icons.visibility_off,
            color: Colors.grey,
          )
        : const Icon(
            Icons.visibility,
            color: Colors.black,
          ),
    onPressed: () {
      setState(() {
        _isObscure = !_isObscure;
      });
    },
  ),
),

enter image description here enter image description here

Upvotes: 4

Fugipe
Fugipe

Reputation: 406

try this

bool obscurePassword = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: true,
      appBar: AppBar(),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          TextField(
            keyboardType: TextInputType.emailAddress,
            obscureText: obscurePassword,
            decoration: InputDecoration(
              border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(8.0),
                  borderSide: BorderSide.none),
              filled: true,
              hintText: "Mot de passe",
              prefixIcon: InkWell(
                onTap: () {
                  obscurePassword = !obscurePassword;
                  setState(() {});
                },
                child: Icon(
                  obscurePassword ? Icons.lock : Icons.lock_open,
                  color: Color(0xfff28800),
                ),
              ),
            ),
          ),
        
        ],
      ),
    );

Upvotes: 1

Related Questions