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