How to use multiple getx controllers in Flutter?

Question

I wonder how to use multiple getx controllers in flutter.
Even if the data is updated, it is not reflected in real time.
and Getbuilder can only use one controller.
Can you give me an example of the code?

Code example

class Controller1 extends GetxController {
  int counter = 0;

  void addCounter() {
    counter++;
    update();
  }
}

class Controller2 extends GetxController {
  int counter = 0;

  void addCounter() {
    counter++;
    update();
  }
}

class CounterView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    Controller1 controller1 = Get.find();
    Controller2 controller2 = Get.find();

    return Text(
      '${controller1.counter} / ${controller2.counter}'
    );
  }
}

class CounterButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    Controller1 controller1 = Get.find();
    Controller2 controller2 = Get.find();

    return Column(
      children: [
        GestureDetector(
          onTap: () => controller1.addCounter(),
          child: ...
        );
        GestureDetector(
          onTap: () => controller2.addCounter(),
          child: ...
        );
      ]
    );
  }
}

Answer 1

1. Remember that if you use the GetBuilder(), you have to manually update the controller state after performing some actions.

2. It is not a good idea to initialize your controllers in the build method of your function. You should put them where they only get initialized once (outside the build method)

3. If you have more than one controller in use in a widget, you should consider using the Obx(() {return Widget}) approach.

Read more about state management with getx here

Answer 2

I have alternative solution.

import 'package:flutter/material.dart';
import 'package:get/get.dart';

class Controller1 extends GetxController {
  int counter = 0;

  void addCounter() {
    counter++;
    update();
  }
}

class Controller2 extends GetxController {
  int counter = 0;

  void addCounter() {
    counter++;
    update();
  }
}

class CounterView extends GetView {
  const CounterView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Get.put(Controller1());
    Get.put(Controller2());
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          children: [
            GetBuilder<Controller1>(
              builder: (controller1) => GestureDetector(
                onTap: () => controller1.addCounter(),
                child: const Text(
                    //controller1.counter.toString(),
                    "Controller-1"),
              ),
            ),
            GetBuilder<Controller2>(
              builder: (controller2) => GestureDetector(
                onTap: () => controller2.addCounter(),
                child: const Text(
                    //controller2.counter.toString(),
                    "Controller-2"),
              ),
            ),
            const SizedBox(
              height: 10,
            ),
            GetBuilder<Controller1>(
              builder: (controller1) => GetBuilder<Controller2>(
                builder: (controller2) => Column(
                  children: [
                    Text(
                      "Controller-1 = " + controller1.counter.toString(),
                    ),
                    Text(
                      "Controller-2 = " + controller2.counter.toString(),
                    ),
                    Text(
                      "C1 / C2 = " +
                          (controller1.counter / controller2.counter)
                              .toString(),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}