Changing a button`s appearance , when clicked using GetX

Question

im trying to change a button`s appearance when clicked , and im handling the state by getX . the problem is , i dont know what is the best way to reload the page when some state is changed.

im actually looking for a "setState" equivalent in getX.

i tried obx( ()=> ElevatedButton()) but it says that im using it in a wrong way , no matter where i place the obx widget.

Answer 1

If you want to use Obx() then you have to pass observable variable .obs then it will change state. you can check this documentation.

Example :

You have to make observable variable in controller.

final isChanged = false.obs;

in view screen handle like this.

Obx(
            () => ElevatedButton(
              style: ButtonStyle(
                backgroundColor: MaterialStatePropertyAll(
                    controller.isChanged.value ? Colors.cyan : Colors.black),
              ),
              onPressed: () =>
                  controller.isChanged.value = !controller.isChanged.value,
              child: const Text(
                'Change color',
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
            ),
          ),