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 ?

Tackling

What is the GetXController? You haven't shared that code with us. I also don't understand your question. Take a look at stackoverflow.com/help/how-to-ask to improve it. – Ingeminate

This is not GetXService, it is GetXcontroller – Candice

Look at the ever method of controller .this method works like the watch – Jewett

Answer 1

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

Mallemuck

See more explanations here – Mallemuck

Answer 2

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.

Jose

Can we listen to it more than once like a broadcast stream? I have tried listening an Rx twice and only the first one receives values. Any ideas around this? – Viquelia

@AkashGorai did you found any solution? I am looking for the same thing you tried. – Ride

In case it is not possible with GetX, you can just create a separate streamsubscription and pass the data there. – Jose

Answer 3

YourController.dart

import 'package:get/state_manager.dart';

class PressedState extends GetxController{

  RxBool pressedBool = true.obs;

  void changeStatus() {
     pressedBool.toggle();
  }

}

YourView.dart

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

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

Harveyharvie

Answer 4

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();
  }
}

Saberhagen

Answer 5

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}');
}
)

Erwinery

Is it possible to listen to the update so that when an update happens, you call a function? Case in point: When google polylines are updated, you need to call a function to animate camera. – Astrogate

You can chain your function which animates the camera inside that controller which updated your polylines. – Erwinery

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();
   }
);

Personality