[플러터] Flutter - GetX Model 클래스로 반응형 만들기

2024. 12. 21. 23:48·프로그래밍/Flutter
반응형
BIG

 

오늘은 플러터 작업중에 GetX 라이브러리를 사용중

구글을 검색하여도 한글 블로그 중에 반응형 변수 사용법은 많아도 클래스 자체에 대한 방법은 없기에

글을 좀 남겨본다

 

https://pub.dev/packages/get

 

get | Flutter package

Open screens/snackbars/dialogs without context, manage states and inject dependencies easily with GetX.

pub.dev

 

getx 는 플러터에서 상태관리 라이브러리중의 하나이다. 가장 많은 좋아요를 받고 있기도하다.

대표적으로 위 세개가 있지만

가장 사용하기 쉬운것은 get이 아닐까 싶다.

깊게 들어가면 각각의 장단점이 있긴 하지만...

파이썬이 인기가 많은 이유가 무엇인가?

배우기 쉬어서 인 이유가 95%이상일 것이라고 생각한다.

배우기 쉽다는 것은 코드공유도 쉽다는 것과 같으니...

각설하고,

간단히 get의 사용법을 보자면..

class StoreDataController extends GetxController {

int num = 0;

void increase(){
	num+=1;
    update();
}

}

이런식으로 GetxController를 상속받아서 인스턴스를 만들어주어서 사용한다.

이제 런타임중에 업데이트가 되는 변수들은 다 이 클래스안에 넣어주면 된다.

 

나는 유니티 개발자이기 때문에 이러한 싱글톤 방식의 데이터관리 라이브러리가 매우 익숙하다..

 

반응형으로 쓰려면

class StoreDataController extends GetxController {
RxInt count = 0.obs;

void increase(){
	count ++;
    print(count.value);
}

}

 이 정도가 있는데.. 

이런 변수가 아니라 보통 우리는 하나의 클래스로 데이터를 주고받는것에 모든 프로젝트를

관리한다고 봐도 되기때문에.. 하나의 클래스로 예시를 보이겠다.

클래스는

 

클래스 - 변수들

이런식으로 이루어져있고,

getx에서는 클래스에도 반응형을 주입하고 변수들에도 주입해야한다.

class CheckListData {
  String id = "";
  String name = "";
  String categoryId = "";
  RxBool isChecked = false.obs;

  CheckListData(this.id, this.categoryId, this.name, {bool? isChecked})
      : isChecked = RxBool(isChecked ?? false);
}

class StoreDataController extends GetxController {
  static StoreDataController get instance => Get.find();

  BuildContext? context;


 RxMap<String, RxList<CheckListData>>? checkMapDatas =RxMap<String, RxList<CheckListData>>();
 
 ...생략...
 
 }

위와 같은 checkMapDatas는

각 String으로 이루어진 카테고리별로 특정 목록이 있는 데이터들 이다.

A카테고리 - 10개 B카테고리 20개

뭐 이런식으로 이루어져있고.

플러터에서 저 각 카테고리 항목별로 체크를 했냐 안했냐만 런타임에서 확인하기 위한 데이터이다.

CheckListData는 그래서 RxList로 묶여있지만 안에 데이터는 isChecked라는 bool타입만 Rx로 묶여있다.

 

일반적으로 모든 클래스 모델 데이터를 실시간으로 바꿔 사용해야한다면.. 

class CheckListData {
  RxString id = "".obs;
  RxString name = "".obs;
  RxString categoryId = "".obs;
  RxBool isChecked = false.obs;

}

class StoreDataController extends GetxController {

	Rx<CheckListData> checkListData = CheckListData().obs;
}

이런식으로 선언하고 쓰면 되겠다.

물론 Rx를 사용하여서 번거로운 .value를 사용하기 싫고

위처럼 모든 변수를 어차피 업데이트해야한다면

 

class CheckListData {
  String id = "";
  String name = "";
  String categoryId = "";
  Bool isChecked = false;

}

class StoreDataController extends GetxController {

	CheckListData checkListData = CheckListData();
    
    void updateData(CheckListData data){
    	checkListData = data;
        update();
    }
}

 

이렇게 간단히 update()를 사용하여도 괜찮겠다.

설계를 할 때 이 부분은 헷갈리지 않도록 다 정하고 하는 것이 좋겠다..

 

요새 플러터보다 뭔가.. xcode에서 스위프트를 더 많이 코딩하고 있는 기분인데 -_-;;

ㅋㅋ심지어 그것도 chatgpt가 70%이상은 다 해줘서

코딩을 햇는데도 잘 모르겠는 느낌..

그래도 swift를 1부터 공부하면서 안해도 되서 생산성 부분에서는

쳇지피티가 엄청난 도움이 되고 있다..

 

반응형
BIG
저작자표시 비영리 동일조건 (새창열림)

'프로그래밍 > Flutter' 카테고리의 다른 글

[Flutter]xcode Error Log - Cycle inside Runner; building could produce unreliable results. Cycle details: → Target 'Runner'  (3) 2024.12.12
'프로그래밍/Flutter' 카테고리의 다른 글
  • [Flutter]xcode Error Log - Cycle inside Runner; building could produce unreliable results. Cycle details: → Target 'Runner'
dduR
dduR
글쓰는 프로그래머 뚜르입니다 :)
    백만원으로 1억 만들기
    상담 신청하기
    »
    • 분류 전체보기
      • 공지사항
      • 프로그래밍
        • Flutter
        • Backend
        • Unity
        • Frontend
      • 재테크 부수입
      • 편집툴
        • 포토샵
        • 애프터이펙트
      • 이공계지식
        • 미분적분학
        • 공업수학
        • IT
  • 블로그 메뉴

    • 홈
    • 방명록
  • dduR
    부수익 창출에 목마른 개발자
    dduR
  • 링크

  • 인기 글

  • 반응형
  • hELLO· Designed By정상우.v4.10.2
dduR
[플러터] Flutter - GetX Model 클래스로 반응형 만들기
상단으로

티스토리툴바