自定义小部件无法按预期工作 - GetX package Flutter

Question

I have created a custom widget to create a button as in the image . The Stages option works fine but when I toggle to the Bids List option, I get an output like this . Why is the stages coming in grey color when I select the Bids List Option but the vice versa works fine? Can anyone correct it? I am using GetX in my project.

SelectionOptionButton.dart

class SelectOptionButton extends StatelessWidget {
  SelectOptionButton({Key? key}) : super(key: key);

  final grey = const Color.fromARGB(50, 158, 158, 158);
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
          boxShadow: [
            BoxShadow(color: Color(0xffc8a2c8) // Color(0xffE0E0E0),
                ), //  Color.fromARGB(165, 158, 158, 158)),
            BoxShadow(
                color: Colors.white, // Color.fromARGB(21, 158, 158, 158),
                spreadRadius: -1.0,
                blurRadius: 15.0)
          ], //color: grey,
          borderRadius: BorderRadius.all(Radius.circular(5))),
      padding:
          const EdgeInsets.only(top: 0.05, bottom: 0.05, left: 7, right: 7),
      child: Row(children: [
        SpecificButton(
            isFirstOptionSelected: true, buttonName: 'Stages', id: 1),
        SpecificButton(
            isFirstOptionSelected: false, buttonName: 'Bids List', id: 2),
      ]),
    );
  }
}

class SpecificButton extends StatelessWidget {
  SpecificButton(
      {Key? key,
      required this.isFirstOptionSelected,
      required this.buttonName,
      required this.id})
      : super(key: key);
  int id;
  bool isFirstOptionSelected;
  String buttonName;

  final SelectOptionButtonController _selectOptionButtonController =
      Get.put(SelectOptionButtonController());
  final grey = Color.fromARGB(23, 243, 243, 243);
  @override
  Widget build(BuildContext context) {
    return Obx(
      () => Expanded(
          child: ElevatedButton(
              style: TextButton.styleFrom(
                elevation: isFirstOptionSelected ? 1.5 : 0, //1.5:0,
                backgroundColor: isFirstOptionSelected
                    ? _selectOptionButtonController.isFirstOptionSelected.value
                        ? Colors.white
                        : Colors.transparent //grey
                    : !_selectOptionButtonController.isFirstOptionSelected.value
                        ? Colors.white
                        : Colors.transparent, //grey,
                primary: isFirstOptionSelected
                    ? _selectOptionButtonController.isFirstOptionSelected.value
                        ? MyColors.primaryGradient
                        : Colors.black
                    : !_selectOptionButtonController.isFirstOptionSelected.value
                        ? MyColors.primaryGradient
                        : Colors.black,
              ),
              onPressed: () {
                (id == 1 &&
                            _selectOptionButtonController
                                    .isFirstOptionSelected.value ==
                                true) ||
                        (id == 2 &&
                            _selectOptionButtonController
                                    .isFirstOptionSelected.value ==
                                false)
                    ? null
                    : _selectOptionButtonController.changeSelected();
              },
              child: Text(
                buttonName,
                style: TextStyle(fontFamily: 'HelveticaBold'),
              ))),
    );
  }
}

This is the respective controller

class SelectOptionButtonController extends GetxController {
  var isFirstOptionSelected = true.obs;

  void changeSelected() {
    isFirstOptionSelected.value = !isFirstOptionSelected.value;
  }
}

Answer 1

you have to use Obx() for reflect changes

Obx(() => Row(children: [
        SpecificButton(
            isFirstOptionSelected: true, buttonName: 'Stages', id: 1),
        SpecificButton(
            isFirstOptionSelected: false, buttonName: 'Bids List', id: 2),
      ]),)

Answer 2

their are two type to change value which is also derive from it's state sample

class SelectOptionButtonController extends GetxController {
  var isFirstOptionSelected = true.obs;

  void changeSelected() {
    /// this part lack below called update();
    isFirstOptionSelected.value = !isFirstOptionSelected.value;
    update(); /// try add this to change the value good to use on this is GetBuilder
    /// or
    /// isFirstOptionSelected(!isFirstOptionSelected.value);
    /// changing value for Obx
   }
}

to change it state

return Obx(()
  => Container(
      decoration: const BoxDecoration(
          boxShadow: [
            BoxShadow(color: Color(0xffc8a2c8) // Color(0xffE0E0E0),
                ), //  Color.fromARGB(165, 158, 158, 158)),
            BoxShadow(
                color: Colors.white, // Color.fromARGB(21, 158, 158, 158),
                spreadRadius: -1.0,
                blurRadius: 15.0)
          ], //color: grey,
          borderRadius: BorderRadius.all(Radius.circular(5))),
      padding:
          const EdgeInsets.only(top: 0.05, bottom: 0.05, left: 7, right: 7),
      child: Row(children: [
        SpecificButton(
            isFirstOptionSelected: controller.isFirstOptionSelected.isTrue, buttonName: 'Stages', id: 1),
        SpecificButton(
            isFirstOptionSelected: controller.isFirstOptionSelected.isFalse, buttonName: 'Bids List', id: 2),
      ]),
    );
  );

try it.

Answer 3

do just replace your method to following method,

void changeSelected() {
isFirstOptionSelected.value =! isFirstOptionSelected.value; }