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

04 Dec 2023

flutter

소개

이번에는 Flutter 프레임워크에서 제공하는 getX 함수를 활용하여 터치 이벤트에 따른 물체 확장과 축소를 구현하는 방법에 대해 알아보겠습니다. getX 함수는 GestureDetector와 함께 사용되며, 터치 이벤트에 따라 사용자의 손가락 위치를 감지하는 역할을 합니다.

구현 방법

1. getX 함수 및 GestureDetector 사용

먼저, getX 함수와 GestureDetector를 import 해주어야 합니다.

import 'package:flutter/cupertino.dart';

GetX 함수는 GestureDetector의 onScaleUpdate 콜백 내에서 사용됩니다. 따라서, GestureDetector 위젯을 먼저 생성해야 합니다.

GestureDetector(
  onScaleUpdate: (ScaleUpdateDetails details) {
    // getX 함수를 사용하여 손가락 위치 추적
    double scaleFactor = details.scaleFactor;

    // 추적된 손가락 위치에 따라 물체 확장 또는 축소 구현
    // TODO: 물체 확장 또는 축소를 위한 코드 작성
  },
  child: Container(
    // 확장/축소를 원하는 물체를 Container로 감싸줍니다.
    width: 200,
    height: 200,
    color: Colors.blue,
  ),
)

위의 코드에서는 GestureDetector의 onScaleUpdate 콜백 안에서 getX 함수를 사용하여 손가락 위치를 추적합니다. 추적된 손가락 위치에 따라 물체를 확장하거나 축소하기 위한 코드를 구현해야 합니다.

2. 물체 확장/축소 코드 작성

물체를 확장하거나 축소하기 위해서는 추적된 손가락 위치를 기반으로 해당 축소/확장 비율을 계산하여 물체의 크기를 변경해주어야 합니다.

GestureDetector(
  onScaleUpdate: (ScaleUpdateDetails details) {
    double scaleFactor = details.scaleFactor;
    double newSize = 200 * scaleFactor;

    // 물체의 크기를 변경합니다.
    setState(() {
      containerSize = newSize;
    });
  },
  child: Container(
    width: containerSize,
    height: containerSize,
    color: Colors.blue,
  ),
)

위의 코드에서는 containerSize 변수를 사용하여 물체의 크기를 조정합니다. getX 함수를 사용하여 추적된 손가락 위치에 따라 scaleFactor 변수가 갱신되고, 이를 기반으로 newSize 변수를 계산합니다. 그리고 setState() 함수를 호출하여 크기를 변경합니다.

추가적으로, 애니메이션 효과를 주고 싶다면 AnimatedContainer 위젯을 사용할 수도 있습니다.

GestureDetector(
  onScaleUpdate: (ScaleUpdateDetails details) {
    double scaleFactor = details.scaleFactor;
    double newSize = 200 * scaleFactor;

    // 물체의 크기를 변경합니다.
    setState(() {
      containerSize = newSize;
    });
  },
  child: AnimatedContainer(
    duration: Duration(milliseconds: 200),
    width: containerSize,
    height: containerSize,
    color: Colors.blue,
  ),
)

위의 코드에서는 AnimatedContainer 위젯을 사용하여 크기 조정 시 애니메이션 효과를 줍니다. duration 속성을 사용하여 애니메이션의 속도를 조절할 수 있습니다.

마무리

이번에는 Flutter에서 getX 함수를 사용하여 터치 이벤트에 따라 물체를 확장하거나 축소하는 방법에 대해서 알아보았습니다. getX 함수는 GestureDetector와 함께 사용되며, 손가락 위치를 추적하는 역할을 합니다. 이를 활용하여 물체의 크기를 조정할 수 있습니다. 애니메이션 효과를 추가하려면 AnimatedContainer 위젯을 사용할 수도 있습니다.

더 자세한 내용은 공식 문서를 참조하시기 바랍니다.