skip to Main Content

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


  1. Try this:

    class CustumTextFormField extends StatelessWidget {
      CustumTextFormField({
        super.key,
        required this.textFieldLable,
        required this.isPassword,
        required this.custumController,
      });
    
      var textFieldLable = "".obs;
      var isPassword = false.obs;
      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),
                  ),
                )),
          ],
        );
      }
    }
    
    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search