Contents

Flutter GetX 상세 소개 (Flutter GetX Detailed Introduction)

1. GetX란? (What is GetX?)

GetX는 Flutter의 강력한 상태 관리 및 라우팅, 의존성 주입 패키지입니다.

가볍고 빠름: 패키지 크기가 작고, 성능이 뛰어남.
간편한 상태 관리: Obx()를 이용해 간단히 UI 업데이트 가능.
라우팅 기능 내장: Get.to()를 사용하여 간단한 화면 이동 가능.
의존성 주입: Get.put()을 이용해 전역적으로 컨트롤러를 쉽게 등록 가능.

💡 Flutter에서 Provider, Bloc과 비교해도 더 쉬운 사용법을 제공하는 것이 특징입니다.

2. GetX 설치 (Installing GetX)

pubspec.yaml 파일에 아래 내용을 추가하세요.

dependencies:
  get: latest_version  # 최신 버전 사용

➡ 최신 버전 확인: pub.dev GetX

설치 후 flutter pub get 실행!

3. 상태 관리 (State Management)

GetX에서는 세 가지 상태 관리 방법을 제공합니다.

단순 상태 관리 (Simple State Management)
반응형 상태 관리 (Reactive State Management)
클래스 기반 상태 관리 (Binding State Management)

3.1 단순 상태 관리 (Simple State Management)

사용법이 가장 간단하며, GetBuilder를 사용하여 UI를 업데이트합니다.

import 'package:flutter/material.dart';
import 'package:get/get.dart';

class CounterController extends GetxController {
  int counter = 0;

  void increment() {
    counter++;
    update(); // GetBuilder를 사용하는 UI 업데이트
  }
}

class SimpleStateScreen extends StatelessWidget {
  final CounterController controller = Get.put(CounterController()); // 전역 등록

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('단순 상태 관리')),
      body: Center(
        child: GetBuilder<CounterController>(
          builder: (controller) => Text('카운터: ${controller.counter}', style: TextStyle(fontSize: 24)),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: controller.increment,
        child: Icon(Icons.add),
      ),
    );
  }
}

✅ 장점: update() 한 번으로 UI를 업데이트할 수 있음.
✅ 단점: 여러 위젯이 있을 때 성능이 떨어질 수 있음.

3.2 반응형 상태 관리 (Reactive State Management)

더 효율적인 상태 관리를 위해 Rx 변수를 사용합니다.

import 'package:flutter/material.dart';
import 'package:get/get.dart';

class CounterController extends GetxController {
  var counter = 0.obs; // Rx 변수를 사용하여 상태 자동 감지

  void increment() {
    counter++;
  }
}

class ReactiveStateScreen extends StatelessWidget {
  final CounterController controller = Get.put(CounterController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('반응형 상태 관리')),
      body: Center(
        child: Obx(() => Text('카운터: ${controller.counter}', style: TextStyle(fontSize: 24))),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: controller.increment,
        child: Icon(Icons.add),
      ),
    );
  }
}

✅ 장점: Obx()를 사용하면 UI가 자동으로 업데이트됨.
✅ 단점: obs를 사용하는 데이터 타입을 신경 써야 함.

3.3 클래스 기반 상태 관리 (Binding State Management)

복잡한 앱에서 의존성을 쉽게 관리할 수 있도록 Binding을 활용하는 방식입니다.

1️⃣ 컨트롤러 생성

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

  void increment() {
    counter++;
  }
}

2️⃣ 바인딩 클래스 생성

class CounterBinding extends Bindings {
  @override
  void dependencies() {
    Get.lazyPut(() => CounterController()); // 필요할 때 생성
  }
}

3️⃣ 라우트 설정에서 바인딩 사용

GetMaterialApp(
  initialRoute: '/',
  getPages: [
    GetPage(name: '/', page: () => HomeScreen(), binding: CounterBinding()),
  ],
);

✅ 장점: 대규모 프로젝트에서 의존성을 효율적으로 관리 가능.
✅ 단점: 초보자가 이해하기 어려울 수 있음.

4. 라우팅 (Navigation)

GetX는 내장된 네비게이션 기능을 제공합니다.

4.1 기본 화면 이동

// 현재 페이지에서 다음 페이지로 이동
Get.to(NextScreen());

4.2 페이지 교체 (기존 페이지 제거)

Get.off(NextScreen());

4.3 모든 페이지 제거 후 이동 (새로운 시작)

Get.offAll(NextScreen());

4.4 데이터 전달

// 데이터 보내기
Get.to(NextScreen(), arguments: "Hello");

// 데이터 받기
var data = Get.arguments;

✅ 장점: context 없이 어디서든 네비게이션 사용 가능.

5. 의존성 관리 (Dependency Injection)

GetX에서는 의존성을 쉽게 주입할 수 있습니다.

5.1 즉시 생성 (`Get.put`)

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

💡 즉시 인스턴스를 생성하고 등록합니다.

5.2 필요할 때 생성 (`Get.lazyPut`)

Get.lazyPut(() => CounterController());

💡 사용될 때만 메모리에 로드됩니다.

5.3 영구적으로 유지 (`Get.putAsync`)

Get.putAsync<CounterController>(() async => CounterController());

💡 비동기적으로 객체를 생성합니다.

✅ 장점: 필요할 때만 메모리를 사용하여 앱의 성능 최적화 가능.

6. 다국어 지원 (Internationalization)

GetX는 다국어 지원을 위한 GetMaterialApp을 제공합니다.

1️⃣ 언어 파일 생성 (translations.dart)

class Messages extends Translations {
  @override
  Map<String, Map<String, String>> get keys => {
    'en_US': {'hello': 'Hello'},
    'ko_KR': {'hello': '안녕하세요'},
  };
}

2️⃣ 앱 설정 (main.dart)

void main() {
  runApp(GetMaterialApp(
    translations: Messages(),
    locale: Locale('ko', 'KR'),
    fallbackLocale: Locale('en', 'US'),
    home: HomeScreen(),
  ));
}

3️⃣ UI에서 사용

Text('hello'.tr), // 자동 번역

✅ 장점: GetX만으로 다국어 지원 가능.

7. 결론 (Conclusion)

기능	GetX	Provider	Bloc
사용법	쉬움 ✅	보통 ⭕	복잡 ❌
성능	빠름 ✅	보통 ⭕	느림 ❌
라우팅 내장	있음 ✅	없음 ❌	없음 ❌
의존성 관리	있음 ✅	없음 ❌	없음 ❌

💡 GetX는 빠르고 쉬운 상태 관리 + 라우팅 + 의존성 관리가 가능하여 중소규모 프로젝트에서 특히 강력한 선택지입니다! 🚀

Post Views: 72