[Flutter] GestureDetector안에 Button 사용시 Button의 onPress 동작하는 방법

GestureDetector에 Button을 추가 할 경우 발생하는 문제

GestureDetector에 button을 추가할 경우 onPressed가 동작하지 않는 문제가 발생할 수 있습니다. 그 이유는 두 위젯 모두 탭 이벤트를 처리하기 때문입니다. 그래서 일반적으로 Button 내부에 GestureDetector를 사용하거나 반대로 GestureDetector 내부에 FilledButton을 사용하는 것은 권장되지 않습니다. 이는 이벤트 처리에서 충돌이 발생할 수 있기 때문입니다.

 

하지만 언제나 그렇듯이 원치안도 해야하는 경우가 발생하는데요. 그럴경우 처리방법에 대하여 알아보겠습니다.

방법 1: GestureDetector의 이벤트를 사용하지 않기

GestureDetector에서 onTap 같은 이벤트를 사용하지 않고, 오직 Button의 onPressed만을 사용하는 경우입니다. 이 방법은 FilledButton의 기능을 그대로 유지하면서, 추가적인 레이아웃이나 스타일링 옵션을 GestureDetector를 통해 적용하고 싶을 때 유용할 수 있습니다.

GestureDetector(
  child: FilledButton(
    onPressed: () {
      // 버튼 로직
      print("FilledButton pressed");
    },
    child: Text("Press Me"),
  ),
)

 

다만 이경우에는 GestureDetector를 사용하려는 목적인 onTap을 사용하지 않기 때문에 사실상 의미없는 사용방법입니다.

방법 2: IgnorePointer 사용

IgnorePointer 위젯을 GestureDetector 주변에 사용하여 Button으로의 이벤트 전달을 방지할 수 있습니다. 이 방법은 GestureDetector 내부에서 특정 동작을 감지하고 싶지만, 그 내부의 Button에는 영향을 주고 싶지 않을 때 사용할 수 있습니다.

GestureDetector(
  onTap: () {
    // GestureDetector 로직
    print("GestureDetector tapped");
  },
  child: IgnorePointer(
    child: FilledButton(
      onPressed: () {
        // 이 부분은 실행되지 않음
        print("FilledButton pressed");
      },
      child: Text("Press Me"),
    ),
  ),
)