❮
Flutter GetX - 1 기초 (Counter)
20210518
예전에 GetX를 비판한 적이 있다. https://letyarch.blogspot.com/2021/03/about-getx.html
하지만 결론적으로 GetX는 매우 좋은 도구이고, 나도 GetX를 사용하고 있다.
GetX의 장점은 그 방대한 기능을 통해서 Flutter의 모든 면을 보충, 개선할 수 있어서 생산성을 극대화할 수 있다는 것.
GetX의 단점은 너무 방대해서 제대로 쓰지 않으면 코드가 걷잡을 수 없이 산으로 간다는 것이다.
간단해 보이는 문법과 짧은 명령들이 초보자들을 쉽게 유인하고 있지만
실상은 높은 자유도와 많은 기능들이 질 낮은 코드들을 만들어 내고 있다.
최근에는 GetX 문서 자체도 좋아지고 있고, 좋은 예제와 강의도 나오고 있어서 앞으로의 미래는 밝아 보인다.
GetX 기초
GetX에서 아키텍쳐는 쓰기 나름이다.
에서 추천하는 방식은 View와 Controller를 분리하는 방식이다. 그리고 Binding을 통해서 이것을 결합한다.
아래는 예제에 있는 카운터 앱 코드다.
void main() {
runApp(GetMaterialApp(
initialRoute: '/home',
getPages: [
GetPage(name: '/home', page: () => HomeView(), binding: HomeBinding()),
],
));
}
class HomeBinding implements Bindings {
@override
void dependencies() {
Get.lazyPut(() => HomeController());
}
}
class HomeController extends GetxController {
var count = 0.obs;
void increment() => count++;
}
class Home extends GetView<HomeController> {
@override
Widget build(context) => Scaffold(
appBar: AppBar(title: Text("counter")),
body: Center(
child: Obx(() => Text("${controller.counter}")),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: controller.increment,
));
}
Obx 를 이용해서 controller의 변화를 리슨하고 있다.
기본적으로 이런 식의 구조를 염두해두는 것이 좋다.
Rx에 익숙하지 않다면 처음에는 Obx 를 남용하지 않는게 좋다.
Obx의 짧은 문법이 유혹하겠지만
GetBuilder를 쓰는 것이 더욱 깔끔하고 직관적인 코드가 된다.
GetBuilder를 쓴다면 update() 를 넣어줘야 한다.
Provider를 써 봤다면 notifyListeners() 와 동일한 역할이라는 것을 눈치챘겠지만, 몰라도 상관없다
위젯에 변화를 반영하는 함수라고 생각하면 된다.
class Controller extends GetxController {
int counter = 0;
void increment() {
counter++;
update();
}
}
GetBuilder<Controller>(
init: Controller(), // 위의 방식대로 GetPage를 사용했다면 init는 필요없다.
builder: (_) => Text(
'${_.counter}',
),
)
보너스) GetPage를 이용하면 그 악명높은 이해/구현 난이도의 Navigator 2.0 을 날로 먹을 수 있다.