GetX 적용하기 - GetX? (1)

GetX | Flutter package

https://pub.dev/packages/get

 

GetX 설치 및 사용

pubspec.yaml 파일에 아래와 같이 추가한다.

dependencies:
	get:

 

그리고 아래와 같이 get 을 사용할 파일에서 import 한다.

import 'package:get/get.dart';

 

GetX 이용하기

1단계 : main.dart 파일에 

void main() => runApp(GetMaterialApp(home: Home()));

GetMaterialApp 을 추가한다.

※ Flutter 의 MaterialApp 을 수정한 것이 아니다. MaterialApp을 자식으로 갖는 미리 구성된 위젯일 뿐이다.

GetMaterialApp은 경로를 만들고, 경로를 주입하고, 번역을 주입하고, 경로 탐색에 필요한 모든 것을 주입합니다. Get을 상태 관리 또는 종속성 관리에만 사용하는 경우 GetMaterialApp을 사용할 필요가 없습니다. GetMaterialApp은 경로, 스낵바, 국제화, bottomSheets, 대화 상자 및 경로와 컨텍스트가 없는 것과 관련된 고급 API에 필요합니다.

This step is only necessary if you gonna use route management (Get.to(), Get.back() and so on). If you not gonna use it then it is not necessary to do step 1

해석 : 1단계는 Get.to(), Get.back() 등과 같은 경로 관리를 사용할 경우에만 필요하다.

 

2단계 : 비즈니스 로직 클래스를 생성하고 모든 변수, 메서드, 컨트롤러를 그 안에 넣는다.

".obs"를 사용하여 모든 변수를 옵저빙 가능하게 만들 수 있다.

class Controller extends GetxController {
	var count = 0.obs;
    increment() => count ++;
}

 

3단계 : View를 생성하고 StatelessWidget 을 사용하여 RAM 을 절약한다. (GetX을 사용하면 StatefulWidget이 아님에도 상태관리가 가능해진다.)

 

class Home extends StatelessWidget {
  @override
  Widget build(context) {
    // Get.put()을 사용하여 클래스를 인스턴스화하고, 해당 클래스를 모든 "자식" 라우트에서 사용할 수 있도록 만든다.
    final Controller c = Get.put(Controller());

    return Scaffold(
      // Obx(() => 를 사용하여 count가 변경될 때마다 Text()가 업데이트되도록 만든다.
      appBar: AppBar(title: Obx(() => Text("Clicks: ${c.count}"))),

      // Navigator.push를 간단한 Get.to()로 대체한다. context가 필요하지 않다.
      body: Center(child: ElevatedButton(
              child: Text("Go to Other"), onPressed: () => Get.to(Other()))),
      floatingActionButton:
          FloatingActionButton(child: Icon(Icons.add), onPressed: c.increment));
  }
}

 

 Chat GPT의 부연설명:

1. Get.put()
   • Get.put(Controller())는 Controller 인스턴스를 생성하고 GetX의 의존성 주입 시스템에 등록합니다.
   • 이렇게 하면 해당 인스턴스를 앱의 어디서든 쉽게 사용할 수 있습니다.
2. Obx
   • Obx(() => ...)는 반응형 상태 관리를 위한 GetX의 위젯입니다.
   • c.count가 변경될 때마다 Obx 내부의 Text 위젯이 자동으로 재렌더링됩니다.
   • count는 반드시 .obs 속성(반응형 변수)으로 선언되어야 합니다.
3. Get.to()
   • Get.to(Other())는 **Navigator.push()**의 대체 기능입니다.
   • context 없이도 화면 전환이 가능합니다.

 

more Chat GPT ...
"GetX을 사용하면 StatefulWidget이 아님에도 상태관리가 가능해진다. 가 맞는 말일까?"

Flutter에서 GetX는 StatefulWidget 없이도 상태 관리를 쉽게 할 수 있는 강력한 상태 관리 솔루션입니다. 이는 GetX의 reactive state management 기능 덕분에 가능합니다.

---

GetX 상태 관리의 특징

1. StatelessWidget에서도 상태 관리 가능
   • 일반적으로 Flutter에서는 상태를 업데이트하려면 StatefulWidget과 setState()를 사용해야 하지만, GetX를 사용하면 StatelessWidget에서도 상태 변경을 감지하고 UI를 갱신할 수 있습니다.
   • GetX는 Reactive Programming을 활용하여 상태 변화에 반응적으로 UI를 업데이트합니다.
2. Obx 또는 GetBuilder 사용
   • GetX에서는 상태를 관찰하기 위해 Obx 또는 GetBuilder를 사용합니다.
   • Obx: 상태가 변경될 때 자동으로 UI를 재빌드합니다.
   • GetBuilder: 호출 시 특정 상태를 수동으로 업데이트합니다.

---

간단한 예시:

1. Reactive State Management (Obx)

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

class CounterController extends GetxController {
  // 상태 변수 정의
  var count = 0.obs; // .obs를 붙이면 반응형 상태가 됨

  void increment() {
    count++;
  }
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: CounterPage(),
    );
  }
}

class CounterPage extends StatelessWidget {
  // 컨트롤러 초기화
  final CounterController controller = Get.put(CounterController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('GetX Counter Example')),
      body: Center(
        child: Obx(() => Text('Count: ${controller.count}', // 상태를 감지
            style: TextStyle(fontSize: 24))),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: controller.increment,
        child: Icon(Icons.add),
      ),
    );
  }
}

2. Simple State Management (GetBuilder)

class CounterController extends GetxController {
  var count = 0;

  void increment() {
    count++;
    update(); // 수동으로 UI 업데이트
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('GetX Counter Example')),
      body: Center(
        child: GetBuilder<CounterController>(
          builder: (controller) {
            return Text('Count: ${controller.count}', style: TextStyle(fontSize: 24));
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: controller.increment,
        child: Icon(Icons.add),
      ),
    );
  }
}

---

StatefulWidget vs. GetX

• StatefulWidget은 상태를 관리하는 기본 Flutter 방식이지만, 코드가 장황해질 수 있습니다.
• GetX는 단순하고 간결한 코드로 상태를 관리할 수 있도록 해줍니다.
• 또한, GetX는 글로벌 상태 관리, 라우팅, 의존성 주입 등 다양한 기능을 지원합니다.

결론: GetX를 사용하면 StatelessWidget에서도 상태 관리가 가능하며, 코드의 간결성과 유지보수성을 크게 향상시킬 수 있습니다.