How to show/hide in this particular code in flutter-CodePudding

I created this code but I don't know how to show/hide the password could anyone help me

  Container(
          margin: EdgeInsets.all(10),
          child: TextField(
            controller: nameController3,
            decoration: InputDecoration(
              border: OutlineInputBorder(),
              labelText: 'Password',
            ),
            onChanged: (Text) {
              setState(() {});
            },
          )),

CodePudding user response：

You mean like this?


class MyWidgetState extends State<MyWidget> {
  
  TextEditingController nameController3 = TextEditingController();
  bool showPassword = false;
  
  @override
  Widget build(BuildContext context) {
    return Container(
          margin: EdgeInsets.all(10),
      child: Column(
        children: [
          TextField(
        obscureText: showPassword,
        obscuringCharacter: "*",
        controller: nameController3,
        decoration: InputDecoration(
          border: OutlineInputBorder(),
          labelText: 'Password',
        ),
        onChanged: (Text) {
          setState(() {
          });
        },
      ),
      TextButton(
         onPressed: () {
           setState(() {
                  showPassword = !showPassword;
           });
         },
         child: Text('Show / Hide Password')
         )
        ]
      )
    );
  }
}

CodePudding user response：

You shold use the TextField property: obscureText: bool.

Container(
    margin: EdgeInsets.all(10),
       child: TextField(
       controller: nameController3,
       obscureText: true,
       decoration: InputDecoration(
       border: OutlineInputBorder(),
          labelText: 'Password',
       ),
       onChanged: (Text) {
          setState(() {});
       },
)),

You can pass a boolean fieldNameIsHide property and controll it using state management.

CodePudding user response：

Try as follow:

bool showPassword=false;

TextFormField(
  controller: passwordController,
  cursorColor: Colors.white24,
  focusNode: focusPassword,
  validator: passwordValidator,
  obscureText: !showPassword,
  style: TextStyle(color: Colors.white),
  decoration: InputDecoration(
      counterText: '',
      border: InputBorder.none,
      labelText: "PASSWORD",
      labelStyle: TextStyle(
          fontSize: 16,
          letterSpacing: 4,
          fontWeight: FontWeight.bold,
          color: Colors.white.withOpacity(0.5)),
      suffixIcon: InkWell(
          onTap: () {
            setState(() {
              showPassword = !showPassword;
            });
          },
          child: Icon(
            !showPassword ? Icons.visibility : Icons.visibility_off,
            color: Colors.grey,
          )),
      fillColor: MyTheme.grey,
      filled: true),
);