[flutter] getX 함수를 사용하여 터치 이벤트에 따른 위젯 도킹/언도킹 기능 구현하기
목차
GetX란?
GetX는 Flutter 상태 관리 라이브러리입니다. 상태 관리 및 의존성 주입을 간단하게 구현할 수 있는 기능을 제공하며, 앱의 성능을 향상시킬 수 있는 다양한 최적화 기능을 포함하고 있습니다.
터치 이벤트에 따른 위젯 도킹/언도킹 기능 구현하기
GetX의 getX 함수를 사용하면 터치 이벤트에 따라 위젯을 도킹하거나 언도킹하는 기능을 구현할 수 있습니다. 일반적으로 이 기능은 앱 내에서 터치를 통해 특정 위젯을 활성화하거나 비활성화하는 경우에 사용됩니다.
단계별로 구현하는 방법은 아래와 같습니다.
getX함수를 사용하여 터치 이벤트를 감지합니다.- 각 위젯의 상태를 저장할 수 있는
RxBool변수를 생성합니다. - 터치 이벤트에 따라
RxBool변수를 변경합니다. - 위젯의 상태를 변경할 때마다
Obx위젯을 사용하여 위젯을 업데이트합니다.
예제 코드
import 'package:flutter/material.dart';
import 'package:get/get.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GetMaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('GetX Example'),
),
body: Center(
child: GetBuilder<TouchController>(
init: TouchController(),
builder: (controller) {
return GestureDetector(
onTap: () => controller.isTapped.toggle(),
child: Container(
width: 200,
height: 200,
color: controller.isTapped.value ? Colors.blue : Colors.red,
child: Center(
child: Obx(() => Text(
controller.isTapped.value ? 'Tapped!' : 'Tap Me!',
style: TextStyle(fontSize: 24, color: Colors.white),
)),
),
),
);
},
),
),
),
);
}
}
class TouchController extends GetxController {
RxBool isTapped = false.obs;
}
위의 예제 코드에서는 터치 이벤트에 따라 Container 위젯의 색상과 텍스트를 변경하는 도킹/언도킹 기능을 구현하였습니다. 터치 이벤트가 발생하면 isTapped 변수가 토글되고, 이에 따라 Container의 색상과 텍스트가 업데이트됩니다.