Flutter 상태 관리 패키지 터치 (GetX)

Flutter에서는 수많은 상태 관리 방법이 있습니다만, 이번은 「GetX」라고 하는 패키지를 만져 보려고 합니다!


추가:

여기의 패키지, 현재는 주류가 되고 있는 Riverpod를 같은 정도의 Like수가 있습니다만, 과거에 여러가지 있어 고참 Flutter엔지니어로부터는 경원되고 있는 절이 있는 것 같습니다
다만 많은 버전 업을 반복해 퀄리티도 오르고 있는 것 같기 때문에, 상태 관리의 선정으로 일고의 여지는 있을까라고 생각합니다

GetX란?

공식에서는 다음과 같이 설명됩니다.

GetX is an extra-light and powerful solution for Flutter. It combines high-performance state management, intelligent dependency injection, and route management quickly and practically.

DI나 상태 관리, 루트 관리를 위한 패키지라는 것 같습니다.

해보자

그렇다면 실제로 코드에 통합합시다.

이번에 사용하는 버전은 다음과 같습니다.
・Flutter: stable, 2.0.6
・GetX: 4.1.4

GetMaterialApp

GetX에서 RouteNavigation을 관리하려면 먼저 GetMaterialApp(home: Widget())로 묶어야합니다.

void main() {
  runApp(
    GetMaterialApp(
      home: MyApp(),
    ),
  );
}

단지 위에서 사용한 GetMaterialApp 는, 상태 관리나 DI를 실시하는 것만으로는 필요가 없는 것 같습니다.
기본적으로는 화면 천이등도 GetX 패키지로 관리하는 것이 좋다고 생각하므로 우선 이쪽으로 둘러싸 두면 문제 없을까 생각합니다.

GetxController

그런 다음 상태 관리 및 로직을 작성하기 위한 컨트롤러 클래스를 작성합니다.
컨트롤러를 만들려면 GetxController를 상속합니다.

class Controller extends GetxController{
  // state
  var count = 0.obs;

  // logic
  increment() => count++;
}

0.obs 라는 낯선 것이 나왔습니다.
공식 문장을 인용한 것이 이쪽

You can make any variable observable using a simple ".obs".

아무래도 값을 간단하게 Observable인 것으로 해 주는 것 같습니다.
기본적으로 상태 정보는 실시간으로 UI에 반영하고 싶기 때문에 GetX에서 상태 관리를 한다면 .obs를 많이 사용하게 될 것 같습니다.

우이

그럼 다음에 UI 부분을 작성해 갑니다.

GetX에서는 StatelessWidget 안에 넣을 수있는 것 같습니다 (이 근처는 Riverpod 등과 같습니다)

대충 완성된 것이 이쪽입니다

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final Controller c = Get.put(Controller());

    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: Center(
          child: Obx(
            () => Text(
              '${c.count}',
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: c.increment,
          child: Icon(Icons.add),
        ), // This trailing comma makes auto-formatting nicer for build methods.
      ),
    );
  }
}

그럼 하나씩 설명합니다.

Get

우선 여기

final Controller c = Get.put(Controller());

만든 컨트롤러를 사용하려면 Get.put(Controller());여야 합니다.
GetX에서는 Get.~~() 라는 것이 복수 존재합니다. 예를 들면

Get.to(NextScreen()); // 画面遷移を行う

Get.back(); // 前の画面に戻る

Get.off(NextScreen()); // 前の画面に戻ることのない遷移(Splashやログイン画面)

Get.offAll(NextScreen()); // 以前の画面を全てキャンセル

그 외에도 RouteName을 이용한 화면 천이등의 방법도 있으므로, 자세한 것은 여기 를 확인해 보세요.

Obx()

그런 다음 컨트롤러에서 정의한 상태를 표시하는 부분에 대해 설명합니다.

Obx(
  () => Text(
    '${c.count}',
  ),
),

.obs로 Observable화된 값을 실시간으로 UI에 반영하려면 Obx(() => Widget())로 둘러싸야 합니다.
그렇게함으로써

onPressed: c.increment,

여기에서 발화한 함수로 증가된 값이 실시간으로 반영됩니다.

실제 화면은 이런 느낌

끝

어쩔 수 없이 만져 보았습니다만, 기존에서 널리 이용되고 있는 Riverpod나 Provider등보다는 훨씬 심플하게 쓸 수 있을까나라는 인상입니다.
단지 이번 기사는 공식 페이지를 가볍게 번역한 정도의 것이므로, 더 자세한 사항이 신경이 쓰이는 분은 공식 정보를 봐 주세요!