[Flutter] GetX

ireland·2022년 1월 15일
2

flutter

목록 보기
1/1

최근 졸업준비로 한 회사의 프로젝트에 참여하게 되었다.
flutter 1.x버전 + BloC패턴으로 이루어진 프로젝트에서 내가 맡은 일은
flutter 2.x버전 + GetX로 Migration하는 것이다.

하지만, 요놈 GetX가 달콤한데 정확하게 알지 못하면 뭔지도 모르고 막 쓰는 느낌이 강해서 정리겸 post하려고 한다.

첫 post 날짜 기준 최신버전인 get 4.6.1로 작성한다.

내가 보려고 만든 post여서 내용이 많이 생략되겠지만, 나중에 시간을 내서 전부 정리할 예정!

GetX

현재 state management뿐만 아니라 flutter package에서 가장 인기있는 package이다.

GetX라고 하긴 하지만, package이름은 단순하게 get

이것저것 소개도 많지만, 각설하고 기능으로 들어가보자!

Installing

  1. Terminal
flutter pub add get
  1. import
import 'package:get/get';

사용하려는 기능별로 import를 다르게 할 수 있지만, 단순하게 위의 코드만 적어주어도 문제없다.

Route 관리

GetX는 쉬운 Route관리를 제공한다.

아래는 원래 Route를 이동하는 법이다.

Navigator.of(context).push(
	MaterialPageRoute(
    	builder: (BuildContext context) => NextPage(),
    ),
);

이게 GetX에서는 아래처럼 사용할 수 있다.

Get.to(NextPage());

TODO
‣ 모든 Route를 Get.toNamed로 바꿔보기

State 관리

State 관리에서도 방법이 여러가지가 있다.
그것 중에서 가장 편한 방법이 .obx인 것 같지만, 다른 방법도 사용할 때가 온다...

변수 선언하기 + 사용하기

Controller에 State가 될 변수를 선언하면 된다.
선언하는 방법은 여러가지가 있는데,

단순 상태 관리

class Controller extends GetxController {
    // 단순하게 변수를 만들어주면 된다.
    int count = 0;
    void increment() {
    	count++;
        update();
    }
}

// 사용은 아래처럼하면 된다.
GetBuilder<Controller>(
    builder: (c) {
    	return Text("${c.count}");
    }
}

반응형 상태 관리

class Controller extends GetxController {
    // 반응형 상태 관리는 .obs를 붙여준다.
    var count = 0.obs
    void increment() {
    	count.value++;
    }
}

// 사용은 아래처럼하면 된다.
ObX(() {
    return Text("${_controller.count.value}");
}

반응형이 사용도 더 단순하고 좋다.
물론 GetBuilder와 .obs를 같이 사용하는 것도 가능하다!

하지만 가장 단순한 방법은
.obx + Obx(() {})

반응형 상태 관리 변수선언의 다른 방법으로는
var count = Rxn(0); -> 초기 값이 없으면 null
이 있다.
Rx(0)으로도 할 수 있는데 n이 null을 뜻하는 것임
flutter 2.x에서는 Rxn이 좋을 것 같다.


하지만 문제점이 발생했으니....
Scaffold에는 appbar, body등 여러가지가 있다.
Obx()안에는 주로 Widget들이 위치하고 그것을 바꿔주는 역할을 하는데,
appbar, body에 따로따로 Obx를 해주려니 코드가 더러워보이더라...

그래서 생각한 방법은 Scaffold를 Obx안에 넣는것!!

Obx(() {
  return Scaffold(
  	appbar: ~~,
  	body: ~~
  );
}

하지만 어림도 없지

에러발생 악!

.obs와 Obx가 만능인줄 알고 그것만 사용했던 나는 그대로 GetX를 다시 공부하게 되었다.



이럴 때 사용하는 것은??

GetBuilder를 사용하자
Scaffold 밖에 GetX나 Obx를 사용하면 에러가 발생한다.
하지만, GetBuilder는 에러가 발생하지 않는다.

GetBuilder<Controller>(
  builder: (c) {
    return Scaffold(
  	appbar: ~~,
  	body: ~~
    );
  }
)

결국 쉽게 가려고 했지만, 오히려 돌아가게 된 상황

오히려 좋아

솔직히 더 공부할 수 있어서 좋았음

종속성 관리

이건 더 공부하고 적을게요!

profile
"i're"code'

1개의 댓글

comment-user-thumbnail
2022년 10월 14일

오 감사합니다! 도움이 되었습니다!!
추가로 업데이트도 부탁드립니다 ^^/

답글 달기