Flutter GetX trigger function when state changes

Question

How can I call a specific function in my stateless widget, whenever my GetX state changes? E.g. whenever the index of my bottomnavigationbar changes, how can I trigger an event?

    Obx(
        () =>
           BottomNavigationBar(
               items: const <BottomNavigationBarItem>[
                  BottomNavigationBarItem(
                   icon: Icon(Icons.explore),
                   label: 'Erkunden',
                  ),           
               ],
               currentIndex: bottomNavigationController.index.value,
               onTap: (index) {
                     bottomNavigationController.changeIndex(index);
               },
            )
     ),

EDIT:

 class BottomNavigationController extends GetxController {
     RxInt index = 0.obs;

     void changeIndex(int val) {
          index.value = val;
     }
 }

score 9 · Accepted Answer · edited Apr 11 '22 at 14:50

9

Get your controller, listen changes in a method according to your requirements. It may be in constructor, build method, or a button's onPress method etc.

BottomNavigationController bnc = Get.find();

bnc.index.listen((val) {
  // Call a function according to value
});

edited Apr 11 '22 at 14:50

Asjad Siddiqui

562
6
8

answered May 31 '21 at 11:23

ertgrull

1,180
9
13

Where do I put this listener? – Martin Seubert May 31 '21 at 11:29
You can put it in costructor, build method etc. – ertgrull May 31 '21 at 11:38
You can put in controller `onReady` or `onInit` methods – Anoop Thiruonam Jul 30 '21 at 08:46

score 5 · Answer 2 · answered May 31 '21 at 12:02

5

To expand on @ertgrull's answer:

You can add a listener to any stream, but Getx also has built in worker functions for this type of functionality.

Usually when I need this I add the listener in the onInit of the controller.

class BottomNavigationController extends GetxController {
  RxInt index = 0.obs;

  void changeIndex(int val) {
    index.value = val;
  }

  @override
  void onInit() {
    super.onInit();

    ever(index, (value) {
  // call your function here
  // any code in here will be called any time index changes
    });
  }
}

answered May 31 '21 at 12:02

Loren.A

4,872
1
10
17

I heard about the workers, but my functions I want to call are not inside my GetxController, but inside my class/widget with the build method. – Martin Seubert May 31 '21 at 12:07
Ok well you can do as @ertgrull suggested and put the standard listener syntax, or `ever` function in the constructor or build method. What function are you trying to call? What are you trying to do? Because unless you're actually displaying the index or need a rebuild of your bottom nav bar, you don't need that `Obx` there. You can still access the controller without it. – Loren.A May 31 '21 at 12:19
I have a bottom sheet inside my scaffold and whenever the index of my bottomnavigation changes, the bottomsheet should close or open (doing that with a controller). I think i need the Obx for showing the right color of my bottomNavigationItem, right? (see my inital example) – Martin Seubert May 31 '21 at 12:24
Ok, you could even put your `showModalBottomSheet` in the Getx class and pass in `Get.context` and it will work the same. And yeah sorry you're correct about the Obx needed for selected item color if you're gonna be in a stateless widget. – Loren.A May 31 '21 at 13:27
I pun an obx variable inside a function (inside a Getx controller) and the function became reactive without using workers - is it possible? feels like something happand behind the scenes... – vigdora Nov 22 '21 at 11:45

score 0 · Answer 3 · answered May 31 '21 at 10:32

0

if you want to use Obx you have to use Streams first create a Controller

in this example i want to just listen to changes of a number

class AutoLoginCheck extends GetxController {
   var num= "0".obs;

void checkNum() {
    if (num.value == "1") {
      num.value = "0";
    } else {
      num.value = "1";
    }
  }

we can use this function to call that number changing

onTap: () {
   num.checkLoginVal();
                            },

answered May 31 '21 at 10:32

Ardeshir ojan

1,914
1
13
36

1

I updated my question with my controller. I do not want to call a function inside my controller, but to call a local function of my screen with the bottomnavigationbar. In my previous project I used ProviderListener from Riverpod for this. But this time I want to use GetX. – Martin Seubert May 31 '21 at 10:43

score 0 · Answer 4 · edited Jul 20 '21 at 09:21

0

If you are using a GetxController, you can listen to the value in the controller anywhere by adding .obs to the value you would like to listen to.

After adding .obs in the controller the method to listen is the same as the accepted answer.

edited Jul 20 '21 at 09:21

Gerard de Visser

7,590
9
50
58

answered Jul 19 '21 at 09:06

Pranav Manoj

69
1
6

Bro, please elaborate your answer with some sample codes so that all people who read your answer fully understand what you mean. Thank you – Anoop Thiruonam Jul 30 '21 at 08:50

Flutter GetX trigger function when state changes

4 Answers4