Flutter: How to listen to variable change on GetX

Question

I want to change body of the widget depending on if the pressedBool is false or true.

Here is GetxController I wrote.

    import 'package:get/state_manager.dart';
    
    class PressedState extends GetxController{
      var pressedBool = true;
      changeStatus() {
        if(pressedBool){
          pressedBool = false;            
        }
        else {
          pressedBool = true;
        }
        update();
      }

}

Here is where GetX update and listen should work out to change body of the page:

final PressedState pressController = Get.put(PressedState());

return MaterialButton(
    onPressed: () {
      pressController.changeStatus();
    },
    child: 
      pressController.pressedBool
            ? Container(...) : Container(...)), ...

How can I make GetX to listen pressedBool variable?

Answer 1

return MaterialButton(
    onPressed: () {
      pressController.changeStatus();
    },
    child:
      GetBuilder<PressedState>(
        init: PressedState() 
        builder: (pressController) {
          return pressController.pressedBool
            ? Container(...) : Container(...))
        }
      ),
 

Answer 2

you can use ever method on the controller for example

 final Controller c = Get.put(Controller());
 ever(c.counter, (value) => print("$value has been changed"));

or in controller, you declare this

import 'package:get/get.dart';

class Controller extends GetxController {
  var counter = 50.obs;


  void increment() {
    counter = counter + 1;
  }

  @override
  void onInit() {
    ever(counter, (value) => print("$value has been changed!!!"));
    super.onInit();
  }
}

Answer 3

Sometimes, it is useful just listen changes and change the value of some others controllers or variables. For example, if we want to change the tab from another screen.

We can create controller with Rx variable

class TabStateController extends GetxController {
  RxInt tabIndex = 0.obs;
}

and after, on the screen with tabs listen to changes

      _tabStateController.tabIndex.listen((value) {
        _tabController.index = value; 
      });

So, we can listen for changes in the observable variables.

Answer 4

There are 3 ways to listen to change to a property in your controller. You are using update() method in your setter method in your controller so the first one will work for you, also it is the lightest method.

If you didn't initialize a controller in your widget, then:

final Controller _controller = Get.put(Controller());

If you have initialized your controller already and it's in memory, then:

final Controller _controller = Get.find<Controller>();

GetBuilder<Controller> (
init: _controller,
builder: (_) {
 return Text('${_controller.property}');
}
)

Answer 5

YourController.dart

import 'package:get/state_manager.dart';

class PressedState extends GetxController{
  var pressedBool = true.obs;
  changeStatus() {
    if(pressedBool.isTrue){
      pressedBool.toggle();
    }
    else {
      pressedBool.value = true; //or pressedBool.toggle();
    }
   
  }

}

YourView.dart

final Controller pressController = Get.put(PressedState());

return MaterialButton(
    onPressed: () {
      pressController.changeStatus();
    },
    child: Obx(() {
     return pressController.pressedBool
            ? Container(...) : Container(...),
        })
     
    

Answer 6

Here is your controller

import 'package:get/get.dart';

class YourController extende GetxController{

  var yourBoolVar = false.obs;
  
  toggleBoolValue(){

  if(yourBoolVar.isTrue){
    yourBoolVar.toggle();
  }
    yourBoolVar.value = true;
  }

}

and after that listen to changes in your screen

GetX<YourController>(builder: (controller){
  if(controller.yourBoolVar.value){
   // return your true statement view from here
  }else{
   // return your false statement view from here
  }

)

use this to toggle its value in your View Class

YourView.dart

final YourController controller = Get.put(YourController());
return MaterialButton(
        onPressed:() {
        controller.toggleBoolValue();
   }
);