[Flutter] 우리는 언제 GestureDetector가 필요할까?

Flutter에는 다양한 위젯이 존재한다. 그래서 개발을 할 때 구현 방법에 대한 선택지가 다양하다.

예를 들어 검색 버튼을 만들고 싶다면 다음과 같은 방법들이 있다.

1. TextButton, IconButton, ElevatedButton 과 같은 버튼 위젯을 사용
2. GestureDetector 사용

???: 그냥 취향차이 아닌가요? 버튼이 onPressed 속성만 관리하면 되고 훨씬 간편한걸요. 전 버튼으로만 구현할래요

 

당연히 안된다. 각 위젯의 특성을 제대로 이해하고 사용해야만 불필요한 코드를 줄일 수 있다.

먼저 Button과 GestureDetector 위젯의 특성들을 알아보자.

버튼은 자주 사용되는 ElevatedButton을 대표로 설명하도록 한다.

Button vs GestureDetector 함수 비교

1) ElevatedButton

 

ElevatedButton의 함수들을 간략하게 설명하면

• onPressed: 버튼이 눌렸을 때 호출되는 함수
• onLongPress: 버튼이 길게 눌렸을 때 호출되는 함수
• onHover: 마우스 커서가 버튼 위로 올라갔을 때 호출되는 함수
• onFocusChange: 마우스 커서가 버튼위로 올라갔을 때 호출되는 함수

다음과 같이 기본 버튼 위젯들은 버튼이 눌렸을 경우와 같이 정해진 스타일과 동작만을 제공한다.

2) GestureDetector

 

다음은 GestureDetector의 함수들이다.

많이 사용하는 몇 개의 함수만 설명하면

• onDoubleTap: 더블 클릭 호출 함수
• onTapUp / onTapDown : 손가락을 처음 땠을 경우와 처음 눌렀을 때 호출되는 함수
• onSecondaryTap : 두 번째 손가락으로 터치했을 때 호출되는 함수
• onPanStart / onPanUpdate / onPanEnd: 화면 드래그 발생 처리 함수
• onVerticalDragStart / onVerticalDragUpdate / onVerticalDragEnd: 수직 방향으로 드래그할 때 호출되는 함수
• onHorizontalDragStart / onHorizontalDragUpdate / onHorizontalDragEnd: 수평 방향으로 드래그할 때 호출되는 함수

이처럼 GestureDetector는 클릭 뿐만이 아닌 다양한 제스처(스와이프, 드래그 등등), 다양한 상황에 대응할 수 있는 스타일과 동작을 제공한다.

따라서 다음과 같은 상황들이 주어진다면 GestureDetector를 사용한다면 매우 간편하게 구현할 수 있는 것이다.

 

🙍🏻‍♀️ 게시판 페이지에서 게시글을 클릭했을 땐 포커싱만 되고,
     더블 클릭했을 때만 페이지 이동을 구현하고 싶어요.
    → onDoubleTap 사용!

 

🙎🏻‍♂️ 이미지 슬라이드 안에 있는 각각의 이미지들이 자유롭게 확대, 축소가 될 수 있었으면 좋겠어요.
     → onScaleStart/Update/End 함수 사용!

---

GestureDetector가 불필요한 경우

???: 그럼 지금 내 프로젝트에 있는 버튼 싹 지우고, 전부 GestureDetector로 대체하는 게 무조건 좋겠네요?

 

결론적으로 그렇지는 않다. 아래 영상을 확인해보자.

 

 

 

버튼은 기본적으로 시각적인 피드백을 제공하며, 버튼 UI를 구성하는데 style을 제외하고는 코드가 필요하지 않다.

하지만 GestureDetector 구성된 버튼을 보면 테두리, 배경색 같은 속성이 전혀 나타나지 않으며, 터치 시 애니메이션도 전혀 나오지 않는다.

즉 다양한 기능들을 제공하는 만큼 기초적인 모든 기능들도 직접 코드를 작성해야 하는 것이다.

따라서 단순 클릭 이벤트가 필요한 경우나 버튼 색, 테두리 정도의 UI만 필요한 경우에는 Button 위젯을 사용하여 코드 수를 줄이는 것이 좋다.

 

이처럼 각각의 상황에 맞게 위젯을 사용해야만 불필요한 코드를 줄일 수 있고, 익숙해지면 상황에 맞는 위젯과 함수를 빠르게 찾아서 사용할 수 있게 될 것이다.

 

별헤는밤 구경가기

별 헤는 밤: 밤하늘, 별자리, 여행정보와 날씨예보까지 - Apps on Google Play

별 헤는 밤: 밤하늘, 별자리, 여행정보와 날씨예보까지 - Google Play 앱