Flutter - GetX에 대해

안녕하세요

 

오늘은 Flutter의 상태 관리, 화면 전환 네비게이션 관리, 의존성 관리 패키지인 GetX에 대해 알아볼까합니다.

 

https://pub.dev/packages/get

get | Flutter package

 

Flutter를 처음하게 되면 거의 Provider를 통해서 상태관리를 하게 되는데요.

 

하지만 조금 더 다양한 상태 관리 툴을 찾다보면, GetX를 알게 됩니다.

GetX는 아주 쉽고 간단하게 상태를 관찰하여, UI에 보여줍니다.

 

찾아보면서 알게 됐는데, GetX는 상태관리 뿐만 아니라, 네비게이션, 의존성 관리도 해주기 때문에 

상태관리 툴이라고 하기엔 조금 큰 범위인 것 같네요.

 

저는 의존성 관리를 하려고 GetIt을 사용했었는데 GetX랑 GetIt이랑 사용 방법이 조금 비슷한 것 같습니다.

final getIt = GetIt.instance;

// 객체 등록
void setupDependencies() {
  getIt.registerSingleton<SomeService>(SomeService());
}

// 의존성 사용
class MyClass {
  final SomeService service = getIt<SomeService>();

  void doSomething() {
    service.performTask();
  }
}

 

 

import 'package:get/get.dart';

// 컨트롤러 정의
class SomeController extends GetxController {
  void performTask() {
    print("Task performed!");
  }
}

// 의존성 등록 및 사용
void main() {
  Get.put(SomeController()); // 의존성 등록

  final controller = Get.find<SomeController>(); // 주입
  controller.performTask();
}

 

하지만 객체의 생명 주기를 관리하는데 있어서는 GetIt이 조금 더 자세하게 컨트롤 할 수 있다고 하네요.

 

https://pub.dev/packages/get_it

get_it | Dart package

 

 

네비게이션 관리도 Route 방식으로 하더라구요.

class AppRoutes {
  static String home = '/home';
  static String history = '/history';
  static String setting = '/setting';

  static final getPages = [
    GetPage(
      name: home,
      title: "Home",
      page: () => const CardListView(),
    ),
    GetPage(
      name: history,
      title: "History",
      page: () => const HistoryView(),
    ),
    GetPage(
      name: setting,
      title: "Setting",
      page: () => const SettingView(),
    ),
  ];
}

 

컨트롤러를 통해서 AppRoutes를 조작할 수 있습니다.

 

class NavController extends GetxController {
  var selectedIndex = 0.obs; // 현재 페이지
  late PageController pageController; // 페이지 컨트롤러

  @override
  void onInit() {
    super.onInit();
    pageController = PageController(initialPage: selectedIndex.value); // 초기화
  }
	
  // 화면 위젯 가져오기
  List<Widget> getPages() {
    return AppRoutes.getPages.map((page) => page.page()).toList();
  }
  
  // 페이지 제목 가져오기
  String getTitle() {
    return AppRoutes.getPages[selectedIndex.value].title ?? "";
  }
 
  // 화면 전환하기
  void changeTabIndex(int index) {
    selectedIndex.value = index;
    pageController.jumpToPage(index);
  }
}

 

AppRoutes와 관련된 값을 가져오기 위해 Controller에 이렇게 넣었는데,

Widget과 getTitle 같은 UI 요소를 Controller에 넣으니 조금 어색하네요.

 

혹시 다른 좋은 방법이 있으면 알려주세요...!

 

아 그리고 저렇게 Index에 obx를 붙여줘서 상태를 관리할 수 있습니다!

class CounterController extends GetxController {
  var count = 0.obs; // 상태 선언
  void increment() => count++; // 상태 업데이트
}

// 상태 주입과 UI 관리
final CounterController controller = Get.put(CounterController());

Obx(() => Text('${controller.count}')); // 자동 UI 업데이트

상태관리를 설명할 때 가장 일반적인 카운트를 예를 들면 이렇게 동작합니다.

 

getX는 작은 프로젝트에서 빠르게 사용하기 좋은 것 같아요.

그래서 만약 사이드를 빠르게 할 일이 생기면 getX를 사용하지 않을까요? 하하

 

하지만 라인에서는 getX를 추천하는 것 같지는 않아요..!

https://engineering.linecorp.com/ko/blog/flutter-architecture-getx-bloc-provider

Flutter 인기 아키텍처 라이브러리 3종 비교 분석 - GetX vs BLoC vs Provider

 

아무래도 Flutter는 기본적으로 위젯을 트리로 구성하고, 위젯 위치를 BuildContext로 추적하는데

BuildContext를 컨트롤 하지 않는 프레임워크는 조금 본질과 벗어나는 것 같기도 하네요.