GestureDetector에서 전체 행 클릭이 안될 때 (+ InkWell 효과 없애기)

GestureDetector(
  onTap: () {
    ...
  },
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Text(
        '테스트',
      ),
      Icon(Icons.chevron_right),
    ],
  ),
),

 

 

GestureDetector 위젯을 사용하면 다음과 같이 클릭 이벤트를 적용할 수 있다.

이 때, row의 text나 icon을 제외한 부분은 클릭할 수 없다.

전체 row를 클릭할 수 있는 첫번째 방법은 behavior: HitTestBehavior.translucent를 추가해주면 된다.

 

 

GestureDetector(
  behavior: HitTestBehavior.translucent,	// 추가
  onTap: () {
    ...
  },
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Text(
        '테스트',
      ),
      Icon(Icons.chevron_right),
    ],
  ),
),

 

 

 

두번째 방법은 GestureDetector 위젯 대신 InkWell로 변경해주면 된다.

 

 

 

 

 

InkWell 위젯은 GestureDetector와 달리 클릭할 때 효과가 발생한다.

이러한 효과를 지우고 싶으면, 각각 상황에 맞게 splashColor, highlightColor, hoverColor를 투명한 색으로 적용해주면 된다.

 

 

InkWell(
  splashColor: AppColors.transparent,	// 추가
  highlightColor: AppColors.transparent,	// 추가
  hoverColor: AppColors.transparent,	// 추가
  onTap: () {
  },
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Text(
        '테스트',
      ),
      Icon(Icons.chevron_right),
    ],
  ),
),