Flutter: suffixIcon making text not centered - flutter

Question

I have 3 TextFormFields, the last one is for the Password, which means it needs a suffixIcon to show/hide the password, if there is no content, the labels show in the center of the fields, which is the needed look:
But as soon as some content is added, the password text gets some padding (the size of the icon is added to the content as padding), like this:
I tried using a Stack, with the TextFormField and an Icon, but if the Icon is on top, the Password field is unclickable, if the Password field is on top, the icon is unclickable.
Does anyone have any idea how to solve this padding thing?

Answer 1

You can try using prefixIcon inside your decoration for your TextFormField.
It would look something like this :
TextFormField(
//all your other widget here
decoration: InputDecoration(
prefixIcon: prefixIcon??Icon(Icons.visibility),
),
),

Answer 2

If you are having trouble with Stack children pressed/tap. Place tappable widget at bottom level of stack.
Here is the password field you can try:
class PassWordFied extends StatefulWidget {
PassWordFied({Key? key}) : super(key: key);
#override
_PassWordFiedState createState() => _PassWordFiedState();
}
class _PassWordFiedState extends State<PassWordFied> {
bool _isVisiblePassword = true;
#override
Widget build(BuildContext context) {
return TextFormField(
decoration: InputDecoration(
contentPadding: EdgeInsets.all(15),
// isDense: true, //you can test it
suffixIcon: GestureDetector(
onTap: () {
setState(() {
_isVisiblePassword = !_isVisiblePassword;
});
},
child: Icon(
_isVisiblePassword ? Icons.visibility_off : Icons.visibility,
),
),
fillColor: Colors.white.withOpacity(.7),
filled: true,
labelText: "Password"),
obscureText: _isVisiblePassword,
);
}
}