[플러터] 위젯에 클릭 이벤트 부여하기 (Inkwell, GestureDetector)

플러터의 일반적인 위젯들에는 onClick, onPressed 속성이 없다.

InkWell 혹은 GestureDetector으로 일반 위젯을 감싸주면 클릭 이벤트들을 부여할 수 있다.

 

InkWell

 InkWell(
      splashColor: 
      hoverColor: 
      highlightColor: 
      
      onTap: () {
      
      }
      child : Container(...)
      ...

 

InkWell은 onTap, onTapDown, onHover의 기본적인 클릭 이벤트들이 내장되어있다.

또한, 위젯을 클릭 했을때 아래와 같은 클릭 애니메이션이 기본으로 발생한다.

만약 애니메이션이 마음에 들지 않는다면 Colors.transparent을 정의해주면 된다.

간단하게 클릭 기능을 만들고 싶은 위젯을 InkWell로 감싸주면된다.

focusNode를 속성으로 가지고 있어 클릭시 focusNode에 foucs를 자동으로 부여해줄 수 있다.

클릭된 상태

 

GestureDetector

 GestureDetector(
      onLongPress: () {
        
      },
      onTapDown: (details) {
     
      },
      child : Container(...)
    );

해당 위젯도 마찬가지로 클릭 기능을 만들고 싶은 위젯을 감싸주면 된다.

InkWell과는 다르게 애니메이션이 존재하지 않는다.

위의 예제에서의 details와 같이 클릭된 좌표 값을 받아올 수 있는 속성이 존재한다.

또한, 터치와 관련된 모든 이벤트들을 다룰 수 있다.

 

터치 이벤트 선택지가 엄청나게 많다