[flutter] getX 함수를 사용하여 터치 이벤트에 따른 사각형 영역 선택하기

04 Dec 2023

flutter

소개

Flutter는 터치 이벤트를 쉽게 처리할 수 있는 많은 함수와 도구를 제공합니다. 그 중 하나인 ‘getX’ 함수는 터치 이벤트의 x 좌표를 반환하는데 사용됩니다. 이번에는 ‘getX’ 함수를 사용하여 터치 이벤트에 따라 사각형 영역을 선택하는 방법에 대해 알아보겠습니다.

코드 예시

먼저, 사각형 영역을 표시하기 위해 Container 위젯을 사용하고 터치 이벤트를 처리하기 위해 GestureDetector 위젯을 추가합니다. 다음은 코드의 예시입니다:

import 'package:flutter/material.dart';

class RectangleSelection extends StatefulWidget {
  @override
  _RectangleSelectionState createState() => _RectangleSelectionState();
}

class _RectangleSelectionState extends State<RectangleSelection> {
  double xPos = 0;
  double yPos = 0;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanUpdate: (details) {
        setState(() {
          xPos = details.localPosition.dx;
          yPos = details.localPosition.dy;
        });
      },
      child: Scaffold(
        appBar: AppBar(
          title: Text('Rectangle Selection'),
        ),
        body: Container(
          child: Center(
            child: Text(
              'Selected Area: ${(xPos * yPos).toStringAsFixed(2)}',
              style: TextStyle(fontSize: 20),
            ),
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: RectangleSelection(),
  ));
}

위의 코드는 onPanUpdate 콜백을 사용하여 터치 이벤트를 감지하고, 해당 이벤트의 로컬 좌표를 사용하여 xPos와 yPos 변수를 업데이트합니다. 이렇게 업데이트된 좌표는 Text 위젯에 표시되어 선택된 영역의 넓이를 보여줍니다.

해설

GestureDetector 위젯은 여러 가지 터치 동작을 감지하는 기능을 제공합니다. 여기서는 onPanUpdate 콜백을 사용하여 팬(터치 드래그) 동작을 감지합니다. onPanUpdate 콜백은 터치 이벤트가 발생할 때마다 호출되며, details 매개 변수를 통해 해당 이벤트의 상세 정보를 얻을 수 있습니다.

details.localPosition.dx는 터치 이벤트의 x 좌표를 반환하고, details.localPosition.dy는 y 좌표를 반환합니다. 이 값을 사용하여 xPos와 yPos 변수를 업데이트하고, 이 값은 선택된 사각형 영역의 넓이를 계산하고 표시하는 데 사용됩니다.

결론

‘getX’ 함수를 사용하여 터치 이벤트에 따라 사각형 영역을 선택하는 방법에 대해 살펴보았습니다. GestureDetector를 사용하여 터치 이벤트를 감지하고, ‘getX’ 함수를 통해 좌표를 얻어와서 원하는 동작을 수행할 수 있습니다. 이것은 터치 기반 인터페이스를 구현하는 데 유용한 도구입니다.

더 많은 정보는 공식 문서를 참조하시기 바랍니다.