[flutter] getX 함수를 사용하여 터치 이벤트에 따른 UI 업데이트하기
Flutter에서는 getX 함수를 사용하여 터치 이벤트에 따라 UI를 업데이트하는 것이 가능합니다. getX 함수는 현재 터치 이벤트에 대한 위치와 상태 정보를 제공하므로, 이를 활용하여 해당 이벤트에 따른 사용자 인터페이스를 동적으로 변경할 수 있습니다.
getX 함수란?
getX 함수는 GetX 패키지에서 제공하는 상태 관리 기능 중 하나입니다. 이 함수를 사용하면 스크린의 터치 이벤트를 쉽게 감지하고 이를 기반으로 UI를 업데이트할 수 있습니다. getX 함수는 GetWidgetBuilder와 함께 사용되며, 이를 통해 터치 이벤트에 대한 UI 업데이트 로직을 구현할 수 있습니다.
예제 코드
다음은 getX 함수를 사용하여 터치 이벤트에 따라 UI를 업데이트하는 간단한 예제 코드입니다.
import 'package:flutter/material.dart';
import 'package:get/get.dart';
class MyHomePage extends StatelessWidget {
final controller = Get.put(MyController());
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('GetX Example'),
),
body: Center(
child: Obx(
() => GestureDetector(
onTap: () {
controller.updateUI();
},
child: Container(
width: controller.boxWidth.value,
height: controller.boxHeight.value,
color: Colors.blue,
),
),
),
),
);
}
}
class MyController extends GetxController {
RxDouble boxWidth = 100.0.obs;
RxDouble boxHeight = 100.0.obs;
void updateUI() {
boxWidth.value += 10;
boxHeight.value += 10;
}
}
위의 코드에서는 GetX 패키지의 GetWidgetBuilder인 Obx를 사용하여 MyController의 boxWidth와 boxHeight 값을 동적으로 감시합니다. GestureDetector 위젯을 사용하여 터치 이벤트를 감지하고, 해당 이벤트가 발생할 때 updateUI 함수가 호출되어 boxWidth와 boxHeight의 값을 10씩 증가시킵니다.
실행 결과
위의 코드를 실행하면 앱 화면에 파란색의 사각형이 표시되며, 터치할 때마다 사각형의 크기가 10씩 커집니다.