Flutter GetX 사용법

정혅·2025년 12월 1일

flutter

공부

목록 보기

7/11

GetX 란 무엇인가?

Flutter에서 상태 관리를 비롯해 다양한 기능을 제공하는 라이브러리

장점
- 간결한 코드, 빠른 개발 속도, 높은 성능
- 상태 관리, 의존성 주입, 라우트 관리 등 개발 과정을 단순화시킬 수 있다.

패키지 설치

puspect.yaml 파일에 GetX 패키지 추가

GetX 사용방법

.obs를 사용하여 변수를 관찰 가능한 상태로 만들고, Obx() 위젯 또는 Getx()위젯을 사용하여 UI를 해당 상태에 반응하게 할 수 있다.

Obx : Rx 변수의 변화를 자동 감지해서 UI를 업데이트 한다.
GetBuilder: 컨트롤러를 직접 업데이트 할 수 있다.
GetxController: 앱의 상태를 구조적으로 관리하는 클래스이다.

1. Obx : 자동으로 반응하는 위젯

GetX 에서 가장 많이 쓰이는 위젯으로, Rx 변수 라는 특별한 변수를 감지해 값이 바뀌면 자동으로 UI를 다시 그려준다.

var count = 0.obs;

Obx(() => Text("숫자: $count"))

위 코드에서 count가 바뀌면 Text도 자동으로 바뀐다.
setState() 없이도 화면이 반응하니 간단

2. GetBuilder : 수동으로 필요한 부분만 업데이트

Obx는 자동이지만, 내가 직접 UI를 업데이트 하고 싶을 때 사용

class MyController extends GetxController {
  int count = 0;
  void increment() {
    count++;
    update(); // 여기서만 UI 갱신!
  }
}

GetBuilder<MyController>(
  builder: (controller) {
    return Text("숫자: ${controller.count}");
  }
)

update()를 호출할 때만 UI가 바뀌기 떄문에, 불필요한 렌더링을 줄이고 싶을 때 유용하다.

3. GetxController: 앱의 상태를 관리하는 중추

앱이 커지면 상태를 여러 곳에서 다루게 되므로, 컨트롤러 클래스를 만들어 상태를 관리하는게 좋다.

class CounterController extends GetxController {
  var count = 0.obs;

  void increment() {
    count++;
  }
}

final controller = Get.put(CounterController());