[Flutter] 플러터 화면 터치 좌표 처리

 

 

플러터뿐만 아니라 대부분의 프로그래밍 언어나 프레임워크에서 터치 입력 처리는 보통 UI 구성 요소별로 구현하는게 일반적이다. 그런데 이미지 위의 어떤 부분을 터치했는지가 필요한 경우가 있다. 예를 들어 화면에 보이는 어떠한 이미지상의 서로 다른 부분을 터치할 경우 동작이 상이해 지는 케이스를 생각할 수 있다.

 

이와 같은 처리는 GestureDetector를 이용해 터치 좌표를 알아내어 구현이 가능하다. 다음은 이미지를 하나 표시하고 터치 입력이 원하는 영역에 일어나면 동작을 수행하는 예제이다.

 

class _DemoPageState extends State<DemoPage> {
  // 터치 입력을 처리
  void _handleTapDown(BuildContext context, var dx, var dy) {
    // 원하는 영역인 경우
    if ((dx > 290 && dx < 320) && (dy > 790 && dy < 820)) {
        // 동작 수행
        _DoAaction();
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      // 차일드로 애셋에 포함된 이미지 표시
      child: Image.asset('sample_image.jpg');

      // 터치 입력값을 전달
      onTapDown: (TapDownDetails details) {
        _handleTapDown(
            context, details.localPosition.dx, details.localPosition.dy);
      },
    );
  }
}

 

 

Fin.