[Flutter] GetX의 반응형 상태관리

값이 변경되어야만 update (rebuild)를 합니다.

현재 상태값과 변경될 상태값이 동일하다면 wiget을 다시 그리지 않습니다.

controller

class CountControllerWithReactive {
  RxInt count = 0.obs; // 반응형 상태관리
  void increase() {
    count++;
  }

    // 값을 넣어 줄때
  void putNumber(int value) {
    count(value);
  }
}

ui

class ReactiveSimpleStatePage extends StatelessWidget {
  const ReactiveSimpleStatePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Get.put(CountControllerWithReactive());
    return Scaffold(
        appBar: AppBar(
          title: Text('반응형 상태 관리'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                "GetX",
                style: TextStyle(fontSize: 50),
              ),
                            // 현재 값이 5인 경우 putNumber(5)를 아무리 눌러도 다시 그려지지 않음
              Obx(() => Text(
                    "${Get.find<CountControllerWithReactive>().count.value}",
                    style: TextStyle(fontSize: 50),
                  )),
              RaisedButton(
                onPressed: () {
                  Get.find<CountControllerWithReactive>().increase();
                },
                child: Text(
                  "+",
                  style: TextStyle(fontSize: 50),
                ),
              )
              RaisedButton(
                onPressed: () {
                  Get.find<CountControllerWithReactive>().putNumber(5);
                },
                child: Text(
                  "5로 변경",
                  style: TextStyle(fontSize: 50),
                ),
              ),
            ],
          ),
        ));
  }
}

이벤트 트리거

controller

import 'package:get/get.dart';

// trigger를 위해 getxcontroller 상속
class CountControllerWithReactive extends GetxController {
  RxInt count = 0.obs; // 반응형 상태관리
  void increase() {
    count++;
  }

  void putNumber(int value) {
    count(value);
  }

  // getxcontroller lifecycle
  @override
  void onInit() {
    // TODO: implement onInit
    // worker
    // 매번 값이 변경될 때 마다 호출 (반응 상태일때만 가능)
    ever(count, (_) => print("매번 호출"));
    // 한번만 호출
    once(count, (_) => print("한번만 호출"));
    // 이벤트가 끝났을때 실행
    debounce(count, (_) => print("마지막 변경에 한번만 호출"), time: Duration(seconds: 1));
    // 변경되고 있는 동안 설정한 초마다 실행
    interval(count, (_)=>print("변경되고 있는 동안 1초마다 호출"),time: Duration(seconds: 1));
    super.onInit();
  }

  @override
  void onClose() {
    // TODO: implement onClose
    super.onClose();
  }
}

custom Rx 타입

enum 타입

enum NUM {FIRST, SECOND}
class controller {
    Rx<NUM> nums = NUM.FIRST.obs;

    void put(){
        nums(NUM.SECOND);
    }
}

class 타입

class User{
    String name;
    int age;
}
class controller {
    Rx<User> user = User().obs;

    void put(){
        user(User());
        user.update((_user){
            _user.name = 'name';
        });
    }
}

list 타입

class controller {
    RxList<String> list = [].obs;
    void put(){
        list.addAll();
        list.add();
        list.addIf(user.value.name=='name','okay'); // 조건, 대입값
    }
}

 

참고

https://www.youtube.com/watch?v=TjC1ka8fZJw