오늘은 저희가 제스처 디텍터를 이용해서 버튼 클릭하는 것을 감지하는, 터치를 했을 때 감지하는 것에 대해 살펴보겠습니다. 일단 먼저

컨테이너 위젯을 만들어 주시고, 여기다가 컨테이너 위젯 대신에 센터 위젯을 사용해서 가운데 정렬을 해 보겠습니다. 여기서

차일드, 그 다음에 버튼은 저희가 텍스트 버튼도 있고 여러 가지 사용법을 볼 수 있는데요, 여기서는

텍스트 버튼으로 진행해 보겠습니다. 여기서는 언프레스라고 해서 이렇게 감지하는 것이 있습니다.

물론 이제 제스처 디텍터를 사용하면 텍스트 버튼을 굳이 사용하지 않아도 됩니다. 저희가 두 가지를 동시에

보여드리겠습니다. 여기서는 제가 프린트로 텍스트를 테스트해 보겠습니다. 텍스트는

이렇게 저장하면 이렇게 텍스트

버튼이 보이는 것을 알 수 있고, 제가 이 버튼을 누르면 이렇게 텍스트

버튼 클릭된 것을 알 수 있습니다. 이것을 이용해서 이제

여러 가지 기능을 구현할 수 있습니다. 자, 그 다음에는 그러면

텍스트 버튼이 아닌, 다른 도형이나 이런 것을 클릭했을 때는

어떻게 감지하느냐? 그럴 때는 이제

컨테이너 위에 제스처 디텍터라는 것이

있습니다. 위젯이, 여기 보시면 탭으로 지원하는 것을 알 수

있습니다. 그래서 이렇게 사용해 보도록 하겠습니다. 여기, 여기 안에 컨테이너 위젯을

넣어주시고 박스를 넣어 보도록 하겠습니다.

컬러는 엠버 색깔로 넣고, 이렇게

저장하도록 하겠습니다. 그러면 이렇게

박스가 생긴 것을 알 수 있고, 이것을 역시 클릭하면 이렇게 제스처

디텍터가 이렇게 문구가 뜨는 것을 알 수

있습니다. 그렇지만 바깥을 누르면 아무런

효과가 나타나지 않는 것을 알 수 있고, 이렇게 제스처 디텍터를 넣으면

이렇게 변경되는 것을 알 수 있습니다. 그러면 이제 그 제스처 디텍터를

이용해서 여러분들이 구현할 수 있는데,

그것들도 제가 추후에 설명하도록 하겠습니다.

플러터(Flutter) 앱 개발 - 핵심 강좌 4강 (GestureDetector 사용하여 터치 감지하기)

TOTALLY 개발자

텍스트 버튼을 이용한 터치 감지

컨테이너 위젯과 센터 위젯을 사용하여 버튼 가운데 정렬

텍스트 버튼 사용 및 언프레스 기능 설명

제스처 디텍터와 텍스트 버튼 동시 사용 예시

버튼 클릭 시 텍스트 출력을 통한 테스트

버튼 클릭 감지 결과 확인 및 기능 구현 가능성 설명

제스처 디텍터를 이용한 다양한 도형 터치 감지

텍스트 버튼 이외 도형 클릭 감지 방법 설명

컨테이너 위젯에 제스처 디텍터 위젯 추가

컨테이너 안에 박스 위젯 추가 및 색상 설정

박스 클릭 시 제스처 디텍터 작동 확인

제스처 디텍터 적용 영역 및 효과 설명

제스처 디텍터 활용 및 추가 설명 예고

제스처 디텍터 활용 가능성 언급