[flutter] getX 함수를 사용하여 터치 이벤트에 따른 위젯 확대/축소 구현하기

04 Dec 2023

flutter

소개

앱에서 제스처를 사용하여 위젯 확대 및 축소 기능을 구현하려고 합니다. Flutter의 getX 함수를 사용하여 터치 이벤트를 감지하고 위젯의 크기를 조정하는 방법을 알아보겠습니다.

getX 함수란?

getX 함수는 Flutter의 getX 라이브러리에서 제공하는 함수입니다. 이 함수는 포인터 또는 터치 이벤트의 좌표를 반환합니다.

구현하기

getX 라이브러리를 프로젝트에 추가합니다. pubspec.yaml 파일에 다음과 같이 의존성을 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  get: ^3.24.0

getX 라이브러리를 임포트합니다:

import 'package:get/get.dart';

확대/축소를 원하는 위젯을 생성합니다. 예를 들어 Container 위젯을 사용합니다:

Container(
  width: 200,
  height: 200,
  child: GestureDetector(
    onScaleUpdate: (ScaleUpdateDetails details) {
      double newWidth = details.scale * 200;
      double newHeight = details.scale * 200;

      // 확대/축소된 크기를 적용합니다.
      setState(() {
        width = newWidth;
        height = newHeight;
      });
    },
    child: Text('확대/축소 가능한 위젯'),
  ),
)

getX 함수를 사용하여 터치 이벤트를 감지합니다. onScaleUpdate 콜백 함수에서 getX 함수를 사용하여 포인터 좌표를 가져올 수 있습니다:

onScaleUpdate: (ScaleUpdateDetails details) {
  double newWidth = getX(details);
  double newHeight = getY(details);

  // 확대/축소된 크기를 적용합니다.
  setState(() {
    width = newWidth;
    height = newHeight;
  });
},

getX 함수를 정의합니다. getX 함수는 ScaleUpdateDetails 객체에서 포인터 X 좌표를 가져옵니다:

double getX(ScaleUpdateDetails details) {
  return details.focalPoint.dx;
}

getY 함수도 마찬가지로 정의하여 포인터 Y 좌표를 가져올 수 있습니다:

double getY(ScaleUpdateDetails details) {
  return details.focalPoint.dy;
}

마무리

이제 getX 함수를 사용하여 터치 이벤트에 따른 위젯 확대/축소 기능을 구현할 수 있습니다. getX 라이브러리를 사용하면 간단하게 터치 이벤트를 감지하고 좌표를 가져올 수 있습니다. 자세한 내용은 GetX 공식 문서를 참조하시기 바랍니다.