I use Getx, and more specifically the Obx widget.
Here’s a code snippet where I use Obx:
class CustumTextFormField extends StatelessWidget {
const CustumTextFormField({
super.key,
required this.textFieldLable,
required this.isPassword,
required this.custumController,
});
final String textFieldLable;
final bool isPassword;
final CustumTextFormFieldController custumController;
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FormLable(
text: textFieldLable,
),
SizedBox(
height: fullHeight(context) * .01,
),
Container(
padding: EdgeInsets.symmetric(
vertical: 2, horizontal: fullWidth(context) * .02),
height: fullHeight(context) * 0.07,
decoration: BoxDecoration(
border: Border.all(
width: 1,
color: Color(0xFFD6D6D6),
),
borderRadius: BorderRadius.circular(8)),
child: Obx(
() => TextFormField(
obscureText: isPassword && custumController.showPasword.value,
decoration: InputDecoration(
border: InputBorder.none,
suffixIcon: isPassword
? GestureDetector(
onTap: () {
custumController.togleShowPassword();
},
child: Icon( // Removed Obx here
custumController.showPasword.value
? Icons.visibility_off
: Icons.visibility,
color: Color(0xFF101010),
),
)
: null),
),
)),
],
);
}
}
I use an observable variable twice inside Obx, but I still get the error that I’m using Obx improperly.
Error message : ════════ Exception caught by widgets library ═══════════════════════════════════
[Get] the improper use of a GetX has been detected.
You should only use GetX or Obx for the specific widget that will be updated.
If you are seeing this error, you probably did not insert any observable variables into GetX/Obx
or insert them outside the scope that GetX considers suitable for an update
(example: GetX => HeavyWidget => variableObservable).
If you need to update a parent widget and a child widget, wrap each one in an Obx/GetX.
The relevant error-causing widget was:
class CustumTextFormField extends StatelessWidget {
const CustumTextFormField({
super.key,
required this.textFieldLable,
required this.isPassword,
required this.custumController,
});
final String textFieldLable;
final bool isPassword;
final CustumTextFormFieldController custumController;
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FormLable(
text: textFieldLable,
),
SizedBox(
height: fullHeight(context) * .01,
),
Container(
padding: EdgeInsets.symmetric(
vertical: 2, horizontal: fullWidth(context) * .02),
height: fullHeight(context) * 0.07,
decoration: BoxDecoration(
border: Border.all(
width: 1,
color: Color(0xFFD6D6D6),
),
borderRadius: BorderRadius.circular(8)),
child: Obx(
() => TextFormField(
obscureText: isPassword && custumController.showPasword.value,
decoration: InputDecoration(
border: InputBorder.none,
suffixIcon: isPassword
? GestureDetector(
onTap: () {
custumController.togleShowPassword();
},
child: Icon( // Removed Obx here
custumController.showPasword.value
? Icons.visibility_off
: Icons.visibility,
color: Color(0xFF101010),
),
)
: null),
),
)),
],
);
}
}
2
Answers
Try this:
variable "isPassword" is not observable so that, what happening is when this condition is being compile "isPassword && custumController.showPasword.value"
if the "isPassword" is false then it will not go forward to check observable "showPassword" is true or false.that it causing the issue.
to solve this issue make conditon like this "custumController.showPasword.value && isPassword" so that first it will check observable varible and then it will check local variable.