4

GetX의 특별한 데이터 타입

• Rx(Reactive), Obervable : 관측 가능한
• 일단 변수를 만들면, 불러와서 사용하기만 한다.

만약 즉각적으로 데이터가 변하는 것을 원하면?

관측 가능한 변수를 만들어 주자.

• 내가 사용할 데이터를 Observable 하게 만들어주기 위함
• 3가지의 변수 선언 방법이 있다.

1. var myLevel = 1.obs;
  
2. var myLevel = RxInt(1);
  
3. RxInt myLevel = 1.obs;

기존의 데이터 타입 앞에 Rx만 붙여주고, 대문자로 바꿔주자!

- int : RxInt 
- String : RxString = 
- List : RxList = 
- Map : RxMap = 
- bool : RxBool = 

커스텀 클래스의 경우?

- Rx<User>
- Rx<MyUser>
- Rx<Memo>
- RxList<Memos>

null이 가능한 데이터의 경우?

- Rxn<User>
- Rxn<MyUser>
- Rxn<Memo>
- RxListn<Memos>

• 관측 가능한 변수가 변동되며느 관측하고 있던 위젯들에게 새로운 값이 보여진다.
• 이때 주의할 점은, Rx로 감싼 데이터는 .value 를 통해서 데이터를 획득할 수 있다.

RxString myName = 'Teddy'.obs;

...

var controller = Get.find();
Text(controller.myName);          //[ X ]
Text(controller.value.myName);    //[ O ]

• 하지만 List는 제외이다. List는 기존대로 사용한다.
• 새로운 값을 넣어줄 때는 함수처럼도 사용한다.

RxInt myAge = 99.obs;
myAge = 0.obs;
myAge(3);          

관측가능한 위젯

• 관측가능한 변수 (Rx)를 만들었다면, 관측가능한 위젯과 함께 쓴다.
• 위젯 이름은 Obx로, Controller의 Rx 변수들이 변경되면 즉각 새로고침하여, 새로운 데이터를 반영하여 보여준다.

Obx(()=> Widget)

• 화살표 함수 방식으로, 함수 리턴을 위젯으로 줘야하는 방식이다.

마지막 정리!

• Rx -> 데이터 타입에 Observable 하게 사용가능하게 하는 데이터 타입
• .obs -> 데이터에 Observable 해지도록 마법을 주는 애
  • 내가 사용할 데이터를 Observable 하게 만들어주기 위함
• Obx -> Observable 데이터들이 변하면 자동으로 바꾸어 보여주는 플러터 위젯

사용 예시

class AppController extends GetxController {

  RxString myName = 'Teddy'.obs;
  
  AppController();
}

            Obx(() => Text('${controller.myName.value}')),
            ElevatedButton(
                onPressed: () {
                  controller.myName("세은이짱");
                },
                child: Text('${controller.memos.length}')),
          ]