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

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

CodePudding user response：

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