[flutter] getX 함수를 사용하여 터치 이벤트에 따른 위젯 감도 조정하기

04 Dec 2023

flutter

안녕하세요! Flutter를 사용하여 터치 이벤트에 따라 위젯의 감도를 조정하는 방법에 대해 알아보겠습니다.

1. getX 함수란?

getX 함수는 Flutter의 GetX 패키지에서 제공하는 함수로, 사용자의 터치 이벤트(x 좌표)를 감지합니다. 이를 활용하여 다양한 동작을 구현할 수 있습니다.

2. getX 함수를 활용한 위젯 감도 조정

아래는 getX 함수를 사용하여 터치 이벤트에 따라 위젯의 감도를 조정하는 예시입니다. 이 예시에서는 터치로 위젯을 드래그할 때, 드래그한 거리에 따라 위젯이 확대/축소되는 동작을 구현합니다.

import 'package:flutter/material.dart';
import 'package:get/get.dart';

class TouchSensitiveWidget extends StatelessWidget {
  final double initialSize = 100.0;
  final double sensitivity = 0.5;

  @override
  Widget build(BuildContext context) {
    double currentSize = initialSize;

    return GestureDetector(
      onScaleUpdate: (ScaleUpdateDetails details) {
        double newScale = details.scale.clamp(0.5, 2.0); // 확대/축소 비율 제한
        double diff = details.scale - newScale;

        currentSize += diff * sensitivity; // 감도 조정

        Get.find<Controller>().changeSize(currentSize); // 위젯 크기 업데이트
      },
      child: GetBuilder<Controller>(
        init: Controller(),
        builder: (controller) {
          return Container(
            width: controller.size,
            height: controller.size,
            color: Colors.blue,
          );
        },
      ),
    );
  }
}

class Controller extends GetxController {
  double size = 100.0;

  void changeSize(double newSize) {
    size = newSize;
    update();
  }
}

void main() {
  runApp(GetMaterialApp(home: TouchSensitiveWidget()));
}

위 코드에서는 Gesture Detector를 사용하여 드래그 동작을 감지합니다. onScaleUpdate 콜백 함수에서 ScaleUpdateDetails 객체를 통해 드래그에 대한 정보를 가져옵니다.

드래그한 거리에는 details.scale 속성을 사용하여 접근할 수 있습니다. 이 값에 감도(sensitivity)를 곱한 값만큼 위젯 크기를 업데이트하고, GetX 패키지의 GetBuilder 위젯을 사용하여 위젯을 화면에 표시합니다.

위 코드를 실행하면 터치로 위젯을 드래그할 때, 드래그한 거리에 따라 위젯이 확대/축소됩니다.

결론

Flutter의 getX 함수를 사용하여 터치 이벤트에 따라 위젯 감도를 조정하는 방법에 대해 알아보았습니다. getX 함수를 활용하면 다양한 터치 동작을 쉽게 구현할 수 있습니다. 위 예시를 참고하여 자신의 프로젝트에 적용해보세요!