[Flutter] GetX ② - 상태 관리

get | Flutter Package

 

설정

pubspec.yaml

dependencies:
  get: ^4.6.5

 

main.dart

• MaterialApp 을 GetMaterialApp 으로 변경해주세요.
• GetX 를 상태관리로만 사용하실거면 GetMaterialApp 으로 변경하지 않아도 됩니다.

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
  	
    // MaterialApp 을 GetMaterialApp 으로 변경
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const SampleScreen(),
    );
  }
}

 

 

상태 관리

GetX 의 상태 관리 방법은 두가지 입니다.

• 단순 상태 관리자 - GetBuilder
• 반응 상태 관리자 - GetX/Obx

 

GetX 상태 관리의 특징은

• 상태 관리를 위해 필요한 것은 controller class 이며 controller class 는 상태 관리 방법에 따라 조금 다릅니다. 
• GetX 로 상태 관리를 한다면 StatefulWidget 을 쓰지 않아도 됩니다.

 

예시는 카운팅 앱으로 진행하겠습니다.

 

 

 

단순 상태 관리자 - GetBuilder

 

sample_controller.dart

• class 를 만들어 주고 GetxController 를 상속 받습니다.
• 숫자를 저장할 변수를 선언해주고 증감처리를 하는 함수를 만듭니다.
• 함수 호출하면 증감 처리 후 update() 를 호출하면 상태가 변경 됩니다.

 

import 'package:get/get.dart';

class SampleController extends GetxController {

  int _counter = 0;
  int get counter => _counter;

  void increment() {
    _counter++;
    update();
  }

  void decrement() {
    _counter--;
    update();
  }
}

 

sample_screen.dart

• 상태 관리가 필요한 위젯을 GetBuilder 로 구현합니다.
• Get.put 을 통해서 controller 를 주입하는 방법도 있지만 GetBuilder 의 init 속성으로도 주입 가능합니다.
• Text 위젯에는 카운트 변수, 증감 버튼에는 증감 함수를 넣어주면 구현이 완료됩니다.

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

class SampleScreen extends StatelessWidget {
  const SampleScreen({Key? key}) : super(key: key);
  
  // final controller = Get.put(SampleController());
  
  @override
  Widget build(BuildContext context) {
    return GetBuilder<SampleController>(
      init: SampleController(),
      builder: (SampleController controller) {
        return Scaffold(
          appBar: AppBar(),
          body: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                '${controller.counter}',
                style: const TextStyle(fontSize: 40),
              ),
              const SizedBox(height: 40),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  ElevatedButton(
                    onPressed: controller.increment,
                    child: const Icon(Icons.add),
                  ),
                  const SizedBox(width: 40),
                  ElevatedButton(
                    onPressed: controller.decrement,
                    child: const Icon(Icons.remove),
                  ),
                ],
              )
            ],
          ),
        );
      },
    );
  }
}

 

 

 

반응 상태 관리자 - GetX/Obx

 

sample_controller.dart

• class 를 만들어 주고 GetxController 를 상속 받습니다.
• 숫자를 저장할 변수를 Rx로 선언 (ex - int => RxInt) 해주고 증감처리를 하는 함수를 만듭니다.
• Rx 변수는 뒤에 obs 만 붙여주면 됩니다.
• 함수를 호출하면 증감 처리 후 별도의 처리 없이 상태가 변경 됩니다.

import 'package:get/get.dart';

class SampleController extends GetxController {

  RxInt _counter = 0.obs;
  RxInt get counter => _counter;

  void increment() {
    _counter++;
  }

  void decrement() {
    _counter--;
  }
}

 

 

sample_screen.dart

• Get.put 을 통해서 controller 를 주입해줍니다.
• 부모 위젯에서 controller 를 Get.put 을 해준적이 있다면 Get.find 로 controller 를 불러올 수 있습니다.
• 상태에 따라 변경될 Text 위젯에는 Obx 로 감싸주시고 controller 의 counter 변수를 넣어주면 됩니다.
• 증감함수 사용은 단순 상태 관리자와 동일합니다.

class SampleScreen extends StatelessWidget {

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
        // 반응 상태 관리
          Obx(() => Text(
              '${controller.counter}',
              style: const TextStyle(fontSize: 40),
            ),
          ),
          const SizedBox(height: 40),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: controller.increment,
                child: const Icon(Icons.add),
              ),
              const SizedBox(width: 40),
              ElevatedButton(
                onPressed: controller.decrement,
                child: const Icon(Icons.remove),
              ),
            ],
          )
        ],
      ),
    );
  }
}

 

 

GetxController 의 LifeCycle 과 Woker 이벤트

GetxController 의 LifeCycle 은 다음과 같습니다.

• onInit -  GetxController 가 생성될 때 호출
• onReady - GetxController 가 initialized 된 후 호출
• onClose -  GetxController 가 메모리에서 제거될 때 호출

 

반응형 상태 값은 변화를 감지하는 콜백함수를 제공합니다.

• ever - 반응형 상태 값이 변경될 때 마다 호출
• once - 반응형 상태 값이 처음 변경될 때 호출
• debounce - 반응형 상태 값의 마지막 변경 이후 특정 시간동안 변경이 없으면 호출
• interval - 반응형 상태 값이 변경되는 동안, 일정 간격으로 호출

 

sample_controller.dart

import 'package:get/get.dart';

class SampleController extends GetxController {

  RxInt _counter = 0.obs;
  RxInt get counter => _counter;

  @override
  void onInit() {
    super.onInit();
    
    // ever
    ever(counter, (int count) => print("counter 값이 $count 로 변경 되었습니다."));

    // once
    once(counter, (int count) => print("counter 값이 $count 로 처음 변경 되었습니다."));
    
    // debounce
    debounce(counter, (int count) => print("$count 로 변경 후 1초 지났습니다."), time: const Duration(seconds: 1));
    
    // interval
    interval(counter, (int count) => print("값이 변경되는 동안 1초 간격으로 호출합니다. 현재 $count"), time: const Duration(seconds: 1));
  }
  
  @override
  void onClose() {
    super.onClose();
    print('onClose');
  }

  @override
  void onReady() {
    super.onReady();
    print('onReady');
  }

  void increment() {
    _counter++;
  }

  void decrement() {
    _counter--;
  }
}