GetX

상태관리 끝판왕이라고 불리는 getX를 사용 해야할 프로젝트가 생겨서 getX를 간단하게 살펴보았다
BLoC 패턴을 주로 사용하고 개인 프로젝트에서 provider 패턴을 사용 했고, 나한텐 BLoC, Provider 둘 다 쉽게 사용할 수 있다보니 getX를 상태관리로 사용한 적은 없고, 라우터랑 현지화 작업에 사용해왔다

getx는 라우터 관리, 상태관리 뿐만 아니라 다이얼로그, 스낵바, 바텀바 등을 쉽게 제공해서 좋은 것 같다
이 중 라우터 관리는 진짜 편하다

간단한 반응형 상태관리 예제만 다루도록 하겠다

GetX를 사용하기 위해서는 기존 MaterialApp을 GetMaterialApp으로 바꿔주면 된다(단순 상태관리는 GetMaterialApp으로 변경안해도 사용가능 함)

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

  @override
  Widget build(BuildContext context) {
    return const GetMaterialApp(
      home: HomePage(),
    );
  }
}

Controller.dart

반응형 상태관리에서 변수를 선언할 때 그냥 final만 써줘도 되지만 변수타입을 지정하는 방식을 선언해서
RxInt 타입으로 firstCount 변수를 선언하고 카운터를 증가, 감소 시키는 이벤트를 생성해준다

class Controller extends GetxController {
  RxInt firstCount = 0.obs;

  void firstIncrement() => firstCount++;
  void firstDecrement() => firstCount--;
}

UI 부분에서는 아래와 같이 사용하면 된다(아직 둘의 차이는 정확히 모름)
반응형 상태관리의 변경된 값을 사용할 위젯을 Obx로 감싸서 사용해주고 아래 IconButton에 증가와 감소
이벤트를 넣어주면 된다

빌드에 print('Build Called'); 을 출력해보면 최초 빌드 이후에 이벤트 변경시에는 호출이 되지 않는다

 final _cPut = Get.put(Controller());
 final Controller _cFind = Get.find();
 
 Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Obx(() => Text(
                  _cFind.firstCount.toString(),
                  style: const TextStyle(
                      color: Colors.amber,
                      fontWeight: FontWeight.bold,
                      fontSize: 30),
                )),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                IconButton(
                    onPressed: () {
                      _cFind.firstIncrement();
                    },
                    icon: const Icon(
                      Icons.add_circle_outline_sharp,
                      size: 30,
                      color: Colors.amber,
                    )),
                IconButton(
                    onPressed: () {
                      _cFind.firstDecrement();
                    },
                    icon: const Icon(
                      Icons.remove_circle_outline_sharp,
                      size: 30,
                      color: Colors.amber,
                    )),
              ],
            )
          ],
        ),
      ),

실제 프로젝트에 사용은 해봐야겠지만 확실히 getX가 상태관리에서 좋은 점은 있어보이지만 아직까지는 BLoC 패턴을 학습하는 것을 추천하지만 라우터, 현지화 등 다른 get library를 사용할 목적이라면 get으로 통일해서 사용하는 것도 좋아보인다

개인적으로는 get의 라우터 관리가 정말 편함