상태관리 (1) _GetX

상태관리

  상태(State)란 고정되어 있지 않고 변화되는 것들을 통틀어 일컫는 것

  상태관리는 변화되는 상태(State)를 효율적으로 관리하여 UI와 동기화 하는 과정을 말한다.

 

StatefulWidget 의 SetState 함수

// StatefulWidget 에서 사용되는 상태관리 함수 setState

setState( () {
  // 실행할 이벤트 로직
});

 

setState 함수는 위젯의 build 함수를 재 호출 함으로써 UI를 변경된 상태(데이터)에 맞게 다시 그리게끔 만드는 상태관리 함수!!

 

SetState의 한계

  setState의 목적은 개별 StatefulWidget의 내부에서의 상태관리만을 목적으로 만들어진 상태관리 함수

  따라서 앱 전체적인 상태관리에서는 다른 상태관리 방법을 사용해야 한다.

 

 

중앙 집중 상태 관리 라이브러리

  중앙 집중 상태 관리를 통해 앱 전체적인 상태들을 관리하고, 이벤트를 어디서든 전달 받을 수 있으며, 이벤트에 따라 원하는 위치로 상태를 전달 할 수 도 있다.

  즉, 위젯들간에 데이터를 주고받고 할 필요 없이 바로 자식 위젯에서 직접적인 호출을 통해 상태를 변경 및 UI 동기화를 할 수 있게 만들어 주는 라이브러리라고 할 수 있다.

 

< 대표적인 중앙 집중 상태 관리 라이브러리 >

  - Provider

  - GetX

  - Bolc / Cubit

  - Riverpod

 

 

GetX 상태관리

  GetX의 장점

 

GetX 설치

  Terminal 에서 GetX 라이브러리 설치

flutter pub add get

Terminal 화면

 

설치 확인 ( pubspec.yaml 확인)

pubspec.yaml

 

중앙 집중 상태 등록 ( 컨트롤러 )

  1. 컨트롤러를 만들기

// lib 파일에 컨트롤러 역할을 할 새로운 dart 파일 생성 

import 'package:get/get.dart';

// extends 를 통해 GetxController로부터 상속받고 있음
class ProductController extends GetxController {}

 

  2. 최상위 위젯트리인 main.dart 파일에 컨트롤러 등록

import 'package:get/get.dart';  // 컨트롤러 등록시 필요한 라이브러리

----

@override
Widget build(BuildContext context) {
 
  Get.put(ProductController());   // 컨트롤러 등록
  
  return MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
      colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      useMaterial3: true,
    ),
    home: StatefulWidgetSample(),
  );
}

컨트롤러가 정상적으로 등록된 경우 보이는 로그

 

  3. 상태 관리 이벤트 연결 및 화면 갱신

    3 - 1. 상태 관리가 필요한 데이터를 컨트롤러에 가져오기

import 'package:get/get.dart';

class ProductController extends GetxController {
  Set<String> products = {};        // 상품 목록
  Set<String> leftProducts = {};    // 왼쪽UI에 배치될 상품 목록
  Set<String> rightProducts = {};   // 오른쪽UI에 배치될 상품 목록
}

 

    3 - 2. 상태 관리가 이루어 지도록 하는 이벤트가 발생되는 함수 등록

import 'package:get/get.dart';

class ProductController extends GetxController {
 void addProduct(String product) {
    products.add(product);
    
    // update 함수는 GetxController 로부터 상속받은 함수
    update();
  }
}

 

 - GetxController의 update 함수는 화면이 갱신되어야 하는 부분의 UI 동기화 이벤트를 발동시키는 역할을 수행하는 함수

 

  3 - 3. 상태관리 이벤트를 위젯에 연결

floatingActionButton: Builder(
  builder: (context) => FloatingActionButton(
    onPressed: () {
      // 상태관리 컨트롤러에서 정의된 상품등록 이벤트 호출
      Get.find<ProductController>().addProduct(StringUtils.getRandomString(2));
    },
    child: const Icon(Icons.add),
  ),
),

 

  3 - 4. GetBuilder 위젯을 통해 update 함수가 호출됬을때 화면을 갱신할 위젯를 설정

GetBuilder<ProductController>(
  builder: (controller) {
    return Column(
      children: List.generate(
        controller.products.length,
        (index) => DefaultItem(
          item: controller.products.toList()[index],
          pushZone: (bool isLeftZone, String item) {
            if (isLeftZone) {
              leftProducts.add(item);
            } else {
              rightProducts.add(item);
            }
            products.remove(item);
            update();
          },
        ),
      ),
    );
  },
),