GetX
Flutter를 위한 *state 관리 라이브러리이다.
* state란? 간단하게 말하면 앱에서 사용되는 데이터들이라고 보면 된다.
- 성능 : 성능과 리소스 소비의 최소화에 집중한다. Streams, ChangeNotifier를 사용하지 않는다.
- 생산성 : 쉽고 간결한 구문을 사용한다. 사용하지 않는 리소스는 메모리에서 자동으로 제거해준다.
따라서 개발자가 메모리에서 컨트롤러를 제거하는 것을 신경쓰지 않아도 된다.
- 조직화 : 화면, 프레젠테이션 로직, 비지니스 로직, 종속성 주입, 네비게이션을 분리할 수 있다.
프레젠테이션(보여지는 부분)과 비즈니스(데이터 처리) 로직에 대한 분리
- GetX는 statefulWidget을 사용하지 않아도 된다 !
준비 작업
- pubspec.yaml 파일에 패키지 추가
dependencies:
get: ^4.6.1- 설치
flutter pub get- import
import 'package:get/get.dart';라우트(Route) 관리
원래 다른 페이지로 이동하거나 다이얼로그를 띄울 때 같이 라우트간 이동에서 컨텍스트(context)를 필요로 한다.
하지만 GetX를 사용하면 context없이 라우트를 관리할 수 있다. 따라서 코드가 더 간결해지고 쉬워진다.
GetMaterialApp(
title: 'Getx example',
home: HomePage(),
)Navigation (화면 이동)
Get.to()
- 새로운 화면으로 이동한다.
Get.to(NextPage());
Get.toNamed()
- 미리 설정해둔 이름을 통해 새로운 화면으로 이동한다.
Get.toNamed('/next');
Get.back()
- 이전 화면으로 돌아간다.
Get.back();
Get.off()
- 다음 화면으로 이동하면서 이전 화면을 아예 없애버린다. 이전 화면으로 돌아갈 필요가 없을 때 사용한다.
Get.off(NextPage());
Get.offAll()
- Get.off()가 이전 화면 하나만 없앴다면 Get.offAll()는 이전 모든 화면을 없애고 다음 화면으로 이동한다.
Get.offAll(NextPage());Dialog
Get.defaultDialog()
- Dialog를 화면에 띄어준다. 확인/취소 시에 실행할 함수(onConfirm, onCancel), 확인/취소 텍스트(textConfirm, textCancel), 배경색(backgroundColor)등 여러 설정들을 추가할 수 있다.
Get.defaultDialog(title: 'Dialog', middleText: 'Dialog');
Get.dialog()
- Get.defaultDiaglog()와 달리 원래 사용하던 Dialog 위젯을 가져와서 사용할 수 있다. 따라서 새로 시작하는 프로젝트에서 GetX를 적용할 때는 Get.defalutDialog()를 사용하는 것이 좋지만, 원래 존재하는 프로젝트에 GetX를 적용할 때는 Get.dialog()를 통해 기존 Dialog 위젯을 복사하여 빠르게 작업하는 편이 좋다.
Get.dialog(
Dialog(
child: Container(
height: 100,
child: Center(
child: Text('Dialog'),
),
),
),
);BottomSheet
Get.bottomSheet()
- 내부에 들어갈 위젯만 넣어주면 해당 위젯을 포함하는 BottomSheet를 보여준다.
Get.bottomSheet(
Container(
height: 100,
color: Colors.white,
child: Center(
child: Text('BottomSheet'),
),
),
)상태(State) 관리
- GetX에는 두 가지의 상태 관리법이 존재한다.
simple 방식
- 첫번째 방식은 비교적 간단한 방식이다. 이 방식은 reactive 방식보다 메모리를 적게 사용한다는 장점이 있다.
// GetxController를 상속(extends)하는 controller 클래스를 만드세요
class Controller extends GetxController {
int counter = 0;
void increment() {
counter++;
update(); // increment()가 호출되었을 때, counter 변수가 변경되어 UI에 반영되어야 한다는 것을 update()로 알려주세요
}
}
// 당신의 Stateless/Stateful 클래스에서, increment()가 호출되었을 때 GetBuilder를 이용해 Text를 업데이트 하세요
GetBuilder<Controller>(
init: Controller(), // 맨 처음만! 초기화(init)해주세요
builder: (_) => Text(
'${_.counter}',
),
)
// controller는 처음만 초기화하면 됩니다. 같은 controller로 GetBuilder를 또 사용하려는 경우에는 init을 하지 마세요.
// 중복으로 'init'이 있는 위젯이 배치되자마자, controller는 자동적으로 메모리에서 제거될 것입니다.
// 걱정하실 필요 없이, Get은 자동적으로 controller를 찾아서 해줄겁니다. 그냥 2번 init하지 않는 것만 하시면 됩니다.GetBuilder에 아이디를 부여하여 같은 변수라도 아이디 있는 값을 업데이트 할 수 있다. update(['id']);
reactive 방식
- extends GetController, update(); 안해줘도 된다. RxInt count = 0.obs 만 해주면 됨,
(단, worker을 쓰려면 extends GetxController가 필요 하다.)
- Obx 사용가능, count.value 해서 접근이 가능하다. (단 리스트는 .value를 안해줘도 된다.
- count(5) --> count = 5; 랑 같다.
- simple 방식에서는 value가 바뀌지 않아도 무조건 다시 그리는데 reactive 방식은 value가 바뀌지 않으면 다시 그리지 않는다.
Binding
- 바인딩은 페이지 이동할때 컨트롤러를 주입해 주는 것이다.
- Get.put(); : 페이지 이동 하자 마자 컨트롤러 생성되고 페이지에서 나오면 컨트롤러 삭제 및 메모리해제 한다.
- Get.lazyPut(); : 페이지 이동 하자 마자 컨트롤러 생성이 아니고 컨트롤러 사용할때 컨트롤러 생성. 페이지 나오면 컨트롤러 삭제 및 메모리 해제 동일 하다.
- Get.putAsync(); : Get.put();과 큰차이 없지만 비동기 처리 해야될 때 컨트롤러가 바로 생성되는 게 아니라 앞선처리 후에 컨트롤러 생성 된다. - 인스턴스 생성 후 api 통신해도 되서 굳이 잘 안쓴다고 한다.
- Get.create(); : 이것도 거의 안쓴다고 한다. Get.put(); 에서는 한번 컨트롤러 생성되고 다시 선언 해줘도 또 생성 안되는데 이것은 계속 컨트롤러가 생성된다. (hashcode 찍어보면 인스턴스화 된 고유키를 알 수 있다.)
바인딩 해주는 이유는 페이지에서 Get.put();을 안해줘도 되서 코드 분리가 가능하다. 바인딩 페이지에서 사용하는 컨트롤러 모두 넣어줄 수 있다.
페이지에서는 Get.put(); 안해줘도 바인딩 해줬기 때문에 동일하게 사용이 가능하다.
GetxController는 싱글톤 방식이기 때문에 하나만 존재한다. 따라서 static으로 선언 해서
static CountControllerWithGetX get to ⇒ Get.find();
넣어주면 page에서 CountControllerWithGetX.to.increase(); 이런식으로 사용이 가능하다.
또한 page에서 extends GetView<CountControllerWithGetX> 해주면 controller.increase(); 로 바로 접근 가능하다. - reactive 방식을 쓰면 Obx 에서 controller로 바로 접근 가능 하다.
simple 방식을 쓰면 GetBuilder 방식이라 위와 같은 방식은 필요 없다.
컨트롤러를 계속 유지해야 될 때는 Get.put(GetXControllerTest(), permanent: true);
다시 페이지 간경우에도 이전값이 그대로 유지되는것을 확인 할 수 있다.
GetxService 써주면 동일하게 사용 가능하고 extends GetxService 로 사용한다.
초기화 해주고 싶으면 Get.reset(); 해주면 된다. (단, 모든 GetxController초기화 되서 모두 초기화 필요할 때만 사용해야된다.)
'flutter > basic' 카테고리의 다른 글
| Flutter 아키텍처 패턴 (0) | 2022.12.20 |
|---|---|
| Flutter 라이브러리 정리 (0) | 2022.12.04 |
| Flutter 기본 위젯 (0) | 2022.11.28 |
| Dart 기본 문법(3) (0) | 2022.11.23 |
| Dart 기본 문법(2) (0) | 2022.11.23 |
