Home > Software engineering >  How to show/hide password in TextField? FLUTTER
How to show/hide password in TextField? FLUTTER

Time:10-26

 Text Field(
                            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

`

CodePudding user response:

Live demo on enter image description here enter image description here

CodePudding user response:

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

  • Related