GetX를 통한 상태관리에는
- update를 통한 상태관리
- Reactive한 상태관리
로 나눌 수 있는데 해당 내용을 정리해보았다.
1. 환경설정
pubspec.yaml파일에 해당 코드를 추가한다.
get: ^버전
dependencies:
get: ^3.26.02. 설치
커맨드 창에서
$ flutter pub get
명령어를 입력한다.
3. 불러오기
getX를 사용하고 싶은 파일에 해당 명령어를 불러온다.
import 'package:get/get.dart';4. On Update를 통한 상태관리 사용하기
특징: Reactive 상태관리에 비해 메모리를 적게 사용하기 때문에 일반적인 경우에 사용한다.
1) On Update 컨트롤러 생성하기
class Controller extends GetxController{
int count = 0
increment(){
count++;
update();
}
}2) On Update 컨트롤러 사용하기
update를 통한 상태관리를 이용할 때는 GetBuilder를 사용한다.
- GetBuilder 안 init
아래의 제네릭'<>'에는 위에서 등록한 컨트롤러의 이름을 넣어준다.
컨트롤러를 사용하기 위해서는 init을 해주어야 하는데 아래와 같이
GetBuilder안에 init을 해줄 수 있다.
GetBuilder<Controller>(
init: Controller(), // GetBuilder안 init
builder: (_) {
return Text('count : ${_.count}');
},
),위와 같이 init을 해주었다면 아래처럼 사용할 수 있다.
RaisedButton(onPressed: () {
Get.find<Controller>().increment();
},
),- GetBuilder 밖 init(build 안)
아래와 같이 init을 바깥에 생성할 수도 있다.
Widget build(BuildContext context) {
final controller = Get.put(Controller());
...바깥에 init을 해주었기 때문에 내부에 init을 할 필요는 없다.
GetBuilder<Controller>(
builder: (_) {
return Text('count : ${_.count}');
},
),바깥에 init을 해주었다면 아래처럼 사용할 수 있다.
RaisedButton(onPressed: () {
controller.increment();
},
),5. Reactive를 통한 상태관리 사용하기
1) Reactive 컨트롤러 생성하기
Reactive를 통한 상태관리에서는
변수 타입을 지정할 때 'Rx~ 또는 var' 타입으로 지정해 준다.
또한 값을 대입할 때 .obs를 붙여준다.
class ReactiveController extends GetxController{
RxInt count_1 = 0.obs;
var count_2 = 0.obs;
}2) Reactive 컨트롤러 사용하기
- GetX안 init
Reactive 상태관리를 사용하기 위해 GetX를 사용한다.
아래의 <>에는 위에서 등록한 컨트롤러의 이름을 넣어준다.
컨트롤러를 사용하기 위해서는 init을 해주어야 하는데 아래와 같이
GetX안에 init을 해줄 수 있다.
GetX<ReactiveController>(
init: ReactiveController(), // GetX안 init
builder: (_) {
return Text('count 1 : ${_.count1.value}');
//위에서 value를 붙이는 것은 타입에 따라 다르다.
},
),위와 같이 init을 해주었다면 아래처럼 사용할 수 있다.
RaisedButton(onPressed: () {
Get.find<ReactiveController>().count1 ++;
},
),- GetX 밖 init(build 안)
아래와 같이 init을 바깥에 생성할 수도 있다.
Widget build(BuildContext context) {
final controller = Get.put(ReactiveController());
...마찬가지로 바깥에 init을 해주었기 때문에 내부에 init을 할 필요는 없다.
GetX<ReactiveController>(
builder: (_) {
return Text('count 1 : ${_.count1.value}');
//위에서 value를 붙이는 것은 타입에 따라 다르다.
},
),바깥에 init을 해주었다면 아래처럼 사용할 수 있다.
RaisedButton(onPressed: () {
controller.count1++;
},
),- Obx 사용하기
Reactive 상태관리를 사용하기 위해 Obx를 사용할 수도 있다.
먼저 컨트롤러를 등록해준다. (동일)
Widget build(BuildContext context) {
final controller = Get.put(ReactiveController());
...그러면 다음과 같이 사용이 가능하다.
Obx((){
return Text('count 2 : ${controller.count2.value}');
}),사용방식은 GetX와 동일하다.
RaisedButton(onPressed: () {
controller.count2++;
},
),3) Class instance Obs로 생성하기
먼저 클래스를 생성한다.
class User{
int id;
String name;
User({
@required int id,
@required String name,
}) : this.id = id, this.name = name;
}그 다음 마찬가지로 컨트롤러를 생성한 후 아래와 같이 작성한다.
class ReactiveController extends GetxController{
var user = new User(
id: 1,
name: 'haha',
).obs;
change({
@required int id,
@required String name,
}) {
user.update((val){
val.name = name;
val.id = id;
});
}
}그 다음 컨트롤러를 등록해준다. (동일)
Widget build(BuildContext context) {
final controller = Get.put(ReactiveController());
...그러면 다음과 같이 사용이 가능하다.
Obx((){
return Text('USER : ${controller.user.value.id}/${controller.user.value.name}');
}),버튼으로 사용할 때는 다음과 같이 가능하다.
RaisedButton(onPressed: () {
controller.change(id: 2, name: 'hoho');
},
),4) List Obs로 생성하기
가장 먼저 컨트롤러를 생성한다.
class ReactiveController extends GetxController{
List testList = [1,2,3,4,5].obs;
}그러면 다음과 같이 사용이 가능하다.
Obx((){
return Text('List : ${controller.testList}');
}),위에서 기존 예제와 다른 점은 .value를 붙이지 않았다는 것인데
List, map 같은 형식은 .value를 붙이지 않는다.
6. 마침
위의 내용은 유튜브 채널: '코드팩토리'님의 영상을 참고하였습니다.
해당 링크: https://www.youtube.com/watch?v=CoFLunStYdU&t=775s
더 자세한 내용은 getX GitHub (https://github.com/jonataslaw/getx/blob/master/README.ko-kr.md) 에서 확인하실 수 있습니다.
