setState() is not changing visibility - flutter

Question

I'm making a pop-up dialog that asks for the user's password when he enters certain screens. This field should have an icon that changes the password visibility, but the state change is not being made, it only happens when I exit the dialog and open it again.
getConfirmationPortalKey() {
return showGeneralDialog(
transitionBuilder: (ctx, anim1, anim2, child) => BackdropFilter(
filter:
ImageFilter.blur(sigmaX: 4 * anim1.value, sigmaY: 4 * anim1.value),
child: FadeTransition(
child: child,
opacity: anim1,
),
),
context: context,
barrierDismissible: true,
barrierLabel: '',
barrierColor: Colors.black26,
transitionDuration: Duration(milliseconds: 200),
pageBuilder: (ctx, anim1, anim2) => AlertDialog(
content: Wrap(
alignment: WrapAlignment.center,
children: [
Wrap(
alignment: WrapAlignment.center,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.only(top: 10, bottom: 10),
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
hintText: 'Input Password',
suffixIconConstraints:
BoxConstraints.tightFor(height: 50, width: 50),
suffixIcon: Padding(
padding: EdgeInsets.only(top: 5),
child: SizedBox(
width: 24,
height: 24,
child: IconButton(
icon: passwordPortalVisible
? SvgPicture.asset(
"assets/svgs/icons/visibility_off.svg",
fit: BoxFit.scaleDown,
color: widget.colors.grey.shade400,
)
: SvgPicture.asset(
"assets/svgs/icons/visibility_on.svg",
fit: BoxFit.scaleDown,
color: widget.colors.grey.shade400,
),
onPressed: passwordVisible
? null
: () {
setState(() {
passwordVisible =
!passwordVisible;
});
},
),
),
),
),
controller: textEditingControllerKey,
keyboardType: TextInputType.number,
obscureText: !passwordVisible,
),
),
],
),
],
),
Padding(
padding:
EdgeInsets.only(left: 30, right: 30, top: 10, bottom: 10),
child: Row(
children: [
Expanded(
widget._myBtns.elevatedButton('OK
', (){UserLogin user = UserLogin();})
),
],
),
),
),
],
),
);
}

Answer 1

I think you will need to use StatefulBuilder inside the AlertDialog. I think this is because the dialog is an overlay and doesn't know about the widget it came from.
https://api.flutter.dev/flutter/widgets/StatefulBuilder-class.html
Below is your code edited:
getConfirmationPortalKey() {
return showGeneralDialog(
transitionBuilder: (ctx, anim1, anim2, child) => BackdropFilter(
filter:
ImageFilter.blur(sigmaX: 4 * anim1.value, sigmaY: 4 * anim1.value),
child: FadeTransition(
child: child,
opacity: anim1,
),
),
context: context,
barrierDismissible: true,
barrierLabel: '',
barrierColor: Colors.black26,
transitionDuration: Duration(milliseconds: 200),
pageBuilder: (ctx, anim1, anim2) => AlertDialog(
content: StatefulBuilder(
builder: (BuildContext context, StateSetter setDialogState) {
bool passwordVisible = false;
return Wrap(
alignment: WrapAlignment.center,
children: [
Wrap(
alignment: WrapAlignment.center,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.only(top: 10, bottom: 10),
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
hintText: 'Input Password',
suffixIconConstraints:
BoxConstraints.tightFor(height: 50, width: 50),
suffixIcon: Padding(
padding: EdgeInsets.only(top: 5),
child: SizedBox(
width: 24,
height: 24,
child: IconButton(
icon: passwordPortalVisible
? SvgPicture.asset(
"assets/svgs/icons/visibility_off.svg",
fit: BoxFit.scaleDown,
color: widget.colors.grey.shade400,
)
: SvgPicture.asset(
"assets/svgs/icons/visibility_on.svg",
fit: BoxFit.scaleDown,
color: widget.colors.grey.shade400,
),
onPressed:() => setDialogState(() {
passwordVisible =
!passwordVisible;
});
),
),
),
),
controller: textEditingControllerKey,
keyboardType: TextInputType.number,
obscureText: !passwordVisible,
),
),
],
),
],
),
Padding(
padding:
EdgeInsets.only(left: 30, right: 30, top: 10, bottom: 10),
child: Row(
children: [
Expanded(
widget._myBtns.elevatedButton('OK

Answer 2

The problem is in this line:
onPressed: passwordVisible ? null : () {...}
Your onPressed event only calls the function if passwordVisible is false. Remove the ternary operator and it will call whether passwordVisible is true or false:
onPressed: () {...}