GetX (Reactive state manager) 만들기 2

결론 : 코드팩토리 채널을 보자!!!

https://youtu.be/CoFLunStYdU

 

Reactive state manager = "state를 바로바로 반영해 주는 매니저" 비동기 처리

특징

1. 자동으로 UI 업데이트( 실시간 업데이트 느낌)

2. GetBulider 보다는 무거우나 부담될 정도는 아님

 

RX (ReactiveX의 줄임말 == Reactive) 

1. 어떤 데이터 흐름을 관찰하는 데에 포커스

2. data stream => Observable이라 부름

3. Observable를 주시하고 있는 Observer가 있다

 

예) 피자를 주문할시 앱으로 주문을 하고 배달원이 가져다 주기까지 기다릴 필요가 없다

이때 각 상황을 아래의 이미지에 대입하면 주문 앱(Observable), 사용자(Observer), 배달완료 초인종(Listener interface)

 

[main]

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

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

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

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: PersonalCard(),
    );
  }
}

 

[ person 클래스 ]

class Person {
  int age;
  String name;
  Person({this.age = 0, this.name = ''});
}

 

[ controller 클래스 ]

import 'package:get/get.dart';
import 'package:getx_reactive/model.dart';

class Controller extends GetxController {
  final person = Person().obs; //obs(observable) -> 이벤트를 listen하고 있음
  void updateInfo() {
    person.update((val) {
      //state의 현재 값에 접근하여 가져오거나 변경이 가능
      val?.age++;
      val?.name = 'jjs815';
    });
  }
}

 

[ personalcard (view) ]

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

class PersonalCard extends StatelessWidget {
  PersonalCard({Key? key}) : super(key: key);
  final Controller controller = Get.put(Controller());
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
              margin: EdgeInsets.all(20),
              width: double.maxFinite,
              height: 100,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  color: Color(0xFF89dad0)),
              child: Center(
                  child: GetX<Controller>(
                builder: (_) => Text(
                  'Name: ${controller.person().name}',
                  style: TextStyle(fontSize: 20, color: Colors.white),
                ),
              )),
            ),
            Container(
              margin: EdgeInsets.all(20),
              width: double.maxFinite,
              height: 100,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  color: Color(0xFF89dad0)),
              child: Center(
                child: Obx(
                  () => Text(
                    'Age: ${controller.person().age}',
                    style: TextStyle(fontSize: 20, color: Colors.white),
                  ),
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.all(20),
              width: double.maxFinite,
              height: 100,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  color: Color(0xFF89dad0)),
              child: Center(
                child: GetX(
                  init: Controller(),
                  builder: (controller) => Text(
                    'Age: ${Get.find<Controller>().person().age}',
                    style: TextStyle(fontSize: 20, color: Colors.white),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          controller.updateInfo();
        },
        child: Icon(Icons.add),
        backgroundColor: Colors.red,
      ),
    );
  }
}