Flutter Provider: 4. GetX - Reactive State manager

Youtube 코딩셰프님의 강의를 요약 정리한 글이다. dart 언어나 이론 부분은 자바와 유사하여 대부분 제외하였고, flutter 기초 위주로 정리한다.

https://www.youtube.com/@codingchef

코딩셰프

 

 

 

---

 

Reactive State Manager 개념

 

앞서 배운 GetBuilder와는 다르게 Stream을 다루는 방식이다. GetX, Obx 등을 사용하는데, Stream을 다루므로 GetBuilder 보다는 무거운 방식이다. 대신 update() 메서드를 호출하지 않더라도 자동으로 UI를 업데이트해준다는 장점이 있다.

 

Rx

ReactiveX의 줄임말이며 어떤 데이터의 흐름을 '관찰' 하는데에 포커스를 둔다. 관찰 가능한 데이터를 Observable, 데이터의 관찰자를 Observer라고 하며 관찰 도구를 listener interface라고 부른다.

 

 

MVC Pattern을 사용한다. 아래 강의에서의 그림처럼 Model의 데이터를 View에 그려줬다가, 사용자가 입력하면 Controller에 의해 Model이 변경되고 UI Update가 일어나는 방식이다.

 

 

GetX, Obx 실습

 

다음과 같은 화면을 구성하여 실습한다. Floating Button을 클릭하면 Container 내부의 데이터가 변하면서 UI가 업데이트 되는 기능이다.

 

아래 순서대로 기반 코드를 만든다. main에서 PersonCard() 클래스를 불러온다.

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

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

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

 

그리고 여기에 사용할 Person 클래스를 만든다.

class Person{
  Person({this.age = 0, this.name = ""});

  int age;
  String name;
}

 

controller도 정의한다.

import 'package:get/get.dart';

import 'model.dart';

class Controller extends GetxController{
  final person = Person().obs;

  void updateInfo() {
    person.update((val) {
      val?.age++;
      val?.name = 'Coding Chef';
    }
    );

  }
}

 

 

마지막으로 person_card view를 만든다.

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

import './controller.dart';


class PersonalCard extends StatelessWidget {
  PersonalCard({super.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 ,
      ),
    );
  }
}

 

 

컨테이너가 3개 있는 구조인데, 맨 위에서는 GetBuilder, 그 다음은 Obx, 세번째로는 GetX를 사용하였다. Controller를 의존성 주입하여 사용할 수 있도록 처리하였다.

 

• GetBuilder는 가볍지만, update 메서드를 직접 호출해야한다.
• Obx는 Rx를 사용하여 약간 무겁지만 update는 자동으로 된다. 다만 위 코드에서 선언한 것처럼 외부에서 controller를 선언하고 불러와야한다.
• GetX는 똑같이 Rx를 사용하고, init을 통해 Controller를 초기화할 수 있다는 장점이 있다.

 

 

아래처럼 실습해보면 UI가 잘 업데이트되는 것을 확인할 수 있다.