GETX

flutter를 사용하다보면 어느순간 상태관리를 어떻게 해야하지라는 생각이들게된다. 나는 회사내의 프로젝트가 이미 getx로 세팅되어있어 어느것을 선택하지라는 고민의 과정도 없긴했지만 생존형으로 습득한 지식들을 정리해보려한다.

단순 상태 관리

import 'package:get/get.dart';

class SimpleController extends GetxController {
  int counter = 0;

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

단순 상태관리의 기본예시이다 0에서 1씩 증가하게끔하는 controller이다. counter가 변경되는것을 알리기위해서는update()가 필수이다.

  @override
  Widget build(BuildContext context) {
    Get.put(SimpleController()); // controller 등록
    return Scaffold(
      appBar: AppBar(
        title: const Text("단순 상태관리"),
      ),
      body: Center(
        child: GetBuilder<SimpleController>( // 실시간 렌더링
          builder: (controller) {
            return ElevatedButton(
              child: Text(
                '현재 숫자: ${controller.counter}',
              ),
              onPressed: () {
                controller.increase();
                // Get.find<SimpleController>().increase();
              },
            );
          },
        ),
      ),
    );
  }
}

위의 controller를 사용하는 화면부분이다.controller를 화면에서 사용하기 위해서는 Get.put(controller이름) code를 넣어서 사용한다.

반응형 상태관리

import 'package:get/get.dart';

class ReactiveController extends GetxController {
  RxInt counter = 0.obs;

  void increase() {
    counter++;
  }
}

반응형 상태관리는 변수에 obs를 달아준다 또한 타입에도 RxInt, Rx<Int>,Rx등으로 타입을 변형시켜준다.

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

  @override
  Widget build(BuildContext context) {
    Get.put(SimpleController()); // 단순 상태 관리 controller 등록
    Get.put(ReactiveController()); // 반응형 상태 관리 controller 등록
    return Scaffold(
      appBar: AppBar(
        title: const Text("단순 / 반응형 상태관리"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            GetBuilder<SimpleController>( // 단순 상태 관리
              builder: (controller) {
                return ElevatedButton(
                  child: Text(
                    '[단순]현재 숫자: ${controller.counter}',
                  ),
                  onPressed: () {
                    controller.increase();
                    // Get.find<SimpleController>().increase();
                  },
                );
              },
            ),
            GetX<ReactiveController>( // 반응형 상태관리 - 1
              builder: (controller) {
                return ElevatedButton(
                  child: Text(
                    '반응형 1 / 현재 숫자: ${controller.counter.value}', // .value 로 접근
                  ),
                  onPressed: () {
                    controller.increase();
                    // Get.find<ReactiveController>().increase();
                  },
                );
              },
            ),
            Obx( // 반응형 상태관리 - 2
                  () {
                    return ElevatedButton(
                      child: Text(
                        '반응형 2 / 현재 숫자: ${Get.find<ReactiveController>().counter.value}', // .value 로 접근
                      ),
                      onPressed: () {
                        Get.find<ReactiveController>().increase();
                      },
                    );
              },
            ),
          ],
        ),
      ),
    );
  }
}

반응형 상태관리를 적용한 화면부분에서 사용한 code이다. 마찬가지로 Get.put을 통해 사용할 conroller를 넣어주고 반응형이 적용될 부분에Obx()함수로 포장해서 적용시켜준다.

느낀 점

솔직히 이미 적용되어있는 상태관리가 Getx라서 아직까지 Provider라던가 BloC같은 다른 상태관리 라이브러리들을 사용하지는 못하고 비교글만 찾아본 상태인 현재 Getx가 사용하기 간단하고 편하다는 의견은 맞는거같다.
view와 controller도 분리되어있어서 가독성도 좋다. 다만 getx는 context를 사용하지않아 flutter가 지향하는바와 맞지않는다고 하는데 향후에는 이 부분을 신경써서 다른 상태관리도 찾아보고 사용해볼 기회를 만들어봐야겠다.

참고

https://danawalab.github.io/flutter/2022/08/05/Flutter-Getx.html