Flutter Obx obs

.obs, Obx

'Getx'는 Flutter 상태 관리를 도와주는 도구입니다. 여기에는 몇 가지 핵심 개념이 포함되는데, 그 중 하나가 '.obs'입니다.

'.obs'는 Observable 변수를 선언하는 데 사용됩니다. Observable 변수란 상태 변경이 감지되면 자동으로 UI를 업데이트하는 변수입니다. 다시 말해, 어떤 변수가 변경되었을 때 이를 구독하고 있는 위젯들에게 알려서 이에 따라 자동으로 UI를 업데이트하는 것입니다.

var counter = 0.obs;

increment() {
  counter++;
}

이제 UI에서 counter 변수를 구독할 수 있습니다. 구독하려면 'GetX' 또는 'Obx' 위젯을 사용하면 됩니다.

Obx(() => Text('${counter.value}'))

---

예제를 통해 알아보기

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

void main() {
  Get.put(ContainerController());
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  var test1 = Get.find<ContainerController>();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GetX Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('GetX Example'),
        ),
        body: Container(
          child: Column(
            children: [
              Obx(() {
                return Column(
                  children: test1.containerList
                      .map((color) => Container(
                            height: 50,
                            color: color,
                          ))
                      .toList(),
                );
              }),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  ElevatedButton(
                    onPressed: () {
                      test1.addContainer();
                    },
                    child: Text('Add'),
                  ),
                  SizedBox(width: 10),
                  ElevatedButton(
                    onPressed: () {
                      test1.removeContainer();
                    },
                    child: Text('Remove'),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class ContainerController extends GetxController {
  var containerList = [].obs;

  void addContainer() {
    containerList.add(Colors.red);
  }

  void removeContainer() {
    if (containerList.isNotEmpty) {
      containerList.removeLast();
    }
  }
}

동작

var containerList = [].obs;의 증감에 따라서 화면이 변화합니다.

1. Add 버튼을 누르면 빨간색 컨테이너를 화면에 추가 할 수 있습니다.
2. Remove 버튼을 누르면 빨간색 컨테이너를 삭제 할 수 있습니다.

---

좀 더 알아 보기

ContainerController 기능적 부분과 var containerList = [].obs;변수까지 ContainerController2라는 새로운 클래스에 위임해보겠습니다. ContainerController는 단순하게 ContainerController2를 호출하는 기능만을 갖게 작성해 보겠습니다.

주의

void main() {
 Get.put(ContainerController2());
 Get.put(ContainerController());
 runApp(MyApp());
}

1. ContainerController 생성자는 ContainerController2 인스턴스를 찾으려고 시도합니다.
2. ContainerController 생성자가 ContainerController2 인스턴스를 찾으려고 할 수 있도록. ContainerController2 인스턴스를 ContainerController 인스턴스보다 먼저 작성해 줍니다.

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

void main() {
  Get.put(ContainerController2());
  Get.put(ContainerController());
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  var test1 = Get.find<ContainerController>();
  var test2 = Get.find<ContainerController2>();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GetX Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('GetX Example'),
        ),
        body: Container(
          child: Column(
            children: [
              Obx(() {
                return Column(
                  children: test2.containerList
                      .map((color) => Container(
                            height: 50,
                            color: color,
                          ))
                      .toList(),
                );
              }),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  ElevatedButton(
                    onPressed: () {
                      test1.addContainer();
                    },
                    child: Text('Add'),
                  ),
                  SizedBox(width: 10),
                  ElevatedButton(
                    onPressed: () {
                      test1.removeContainer();
                    },
                    child: Text('Remove'),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class ContainerController extends GetxController {
  var test2 = Get.find<ContainerController2>();

  void addContainer() {
    test2.addContainer();
  }

  void removeContainer() {
    if (test2.containerList.isNotEmpty) {
      test2.containerList.removeLast();
    }
  }
}

class ContainerController2 extends GetxController {
  var containerList = [].obs;

  void addContainer() {
    containerList.add(Colors.red);
  }

  void removeContainer() {
    if (containerList.isNotEmpty) {
      containerList.removeLast();
    }
  }
}

동작

• test2.containerList의 값을 통해서 화면을 나타냅니다.

• 각각의 onPressed는 test2의 메서드가 아니라 test1.addContainer();와 test1.removeContainer();을 실행시키고 있지만 상태 변경을 잘 감지하고 있습니다.