how to add an icon on the right of a textfield flutter

Question

so i have a text field in witch the user will enter the password and i want to display at the end that icon if the user click on it it will show the password else it's going to hidden . the text field is inside the container basically as shown in the picture . How to do it ?

 Container(
        height: MediaQuery.of(context).size.height * 0.08,
        margin: const EdgeInsets.symmetric(horizontal: 5),
        decoration: BoxDecoration(
          color: const Color(0xFFEFEDED),
          border: Border.all(color: Colors.transparent),
          borderRadius: BorderRadius.circular(10),
        ),
        child: Padding(
          padding: const EdgeInsets.only(left: 8.0),
          child: Row(
            children: [
              Icon(Icons.remove_red_eye_outlined),
              TextFormField(
                controller: controller,
                keyboardType:
                    isUrl ? TextInputType.url : TextInputType.text,
                decoration: const InputDecoration(
                  border: InputBorder.none,
                ),
              ),
            ],
          ),
        ),
      )

,

Does this answer your question? [How to show/hide password in TextFormField?](https://stackoverflow.com/questions/49125064/how-to-show-hide-password-in-textformfield) — Md. Yeasin Sheikh, Jun 08 '22 at 15:04

score 3 · Accepted Answer · answered Jun 08 '22 at 15:03

The following code enable and toggles the show/hide text by pressing the "eye" button on the far right. It works with a boolean variable.

Remember to have a Stateful Widget.

bool hidden;
@override
void initState() {
    hidden = true;
    super.initState();
  }

TextFormField(
  controller: controller,
  obscureText: hidden,
  keyboardType: isUrl ? TextInputType.url : TextInputType.text,
  decoration: InputDecoration(
      border: InputBorder.none,
      suffixIcon: IconButton(
          onPressed: () => setState(() {
                hidden = !hidden;
              }),
          icon: const Icon(Icons.remove_red_eye_outlined))),
)

how to add an icon on the right of a textfield flutter

1 Answers1