Flutter[플러터] / IgnorePointer 를 사용하여 터치 이벤트 무시하기 (이그노어포인트, 없애기, 입력, 비활성화, 제한, 터치, 탭, 드래그 방지) IgnorePointer (Flutter Widget of the Week)

IgnorePointer class

히트 테스트 중에는 보이지 않는 위젯입니다.

ignoring 이 true 이면 이 위젯(및 하위 트리)은 적중 테스트에서 보이지 않습니다. 레이아웃 중에도 공간을 사용하고 평소처럼 자식 위젯을 그립니다. RenderBox.hitTest 에서 false를 반환하기 때문에 위치 이벤트의 대상이 될 수 없습니다.

https://youtu.be/qV9pqHWxYgI

공식 문서 코드

 

---

갑자기 앱의 UI가 바뀌는 동작이 진행되면 사용자는 사용하고 싶지 않은 무언가(버튼류)를 건드릴 수 있게 될 것이다. 다들 그러한 경험이 한 번씩은 있지 않은가? 갑자기 나타난 버튼을 잘못 눌러서 원하지 않은 동작이 실행되는 상황 말이다. 이렇듯 실수로 UI를 변경하는 일은 상당히 빈번하게 발생하며 골치 아픈 문제일 것이다. 이러한 문제를 해결하기 위해 위젯의 터치 동작을 비활성화 시켜줘야 하는데 여기서 아주 간단하게 사용할 수 있는 위젯이 있다. 그것이 무엇이냐 하면 바로 IgnorePointer 위젯이다.

이 IgnorePointer 위젯은 자식 위젯의 터치 이벤트(포인터 이벤트)를 무시하도록 만드는 위젯이다. 이 위젯이 감싸고 있는 위젯들은 화면에 보이지만 사용자의 터치 입력은 무시되게 된다. 한번 알아보자.

하위 속성

속성명	타입	기본값	설명
child	Widget	–	자식 위젯을 설정
ignoring	bool	true	터치 이벤트 등 히트 테스트에서 무시할지 여부
ignoringSemantics	bool?	null	접근성 트리에서 무시할지 여부 (Deprecated)

 

사용하는 방법은 엄청나게 간단하다. 터치 동작을 비활성화 하고 싶은 위젯에 IgnorePointer를 감싸주면 된다.

IgnorePointer( // ElevatedButton의 onPressed를 비활성화
  child: ElevatedButton(
    onPressed: () {
      print('터치됨');
    },
    child: Text('Click Here!'),
  ),
)

이렇게 IgnorePointer를 사용해 주면 간단하지만 확실하게 상호작용을 하지 못하게 만들 수 있다. (이 상호작용은 탭, 클릭, 드래그 등 모든 사용자의 터치와 관련된 것을 말한다.)

앞서 서론에서 설명했던 상황이 발생을 한다고 가정을 해보자 서론의 상황을 해결하려면 UI가 변경된 후 어느 정도 시간 동안은 변경된 UI가 터치 이벤트를 무시하게 만들어야 할 것이다.

그렇다면 이 동작은 어떻게 만들까? 바로 파라미터인 ignoring을 사용해 주면 된다.

ignoring: true

ignoring은 bool 타입의 파라미터로 true일 시 터치 이벤트를 무시할 수 있게 되고 false 라면 IgnorePointer의 동작은 없는 것과 마찬가지로 아무런 동작도 하지 않게 된다. 즉 이벤트 무시를 켜고 끌 수 있는 것이다.

일단 먼저 버튼의 상태와 ignoring을 관리할 bool 타입 변수를 두 개 만들어주겠다.

bool showButton = false;
bool ignoreButton = true;

여기서 showButton은 나타날 버튼이 보일지 말지를 결정하기 위해서 만들었고 ignoreButton은 그 나타난 버튼이 잠시동안 터치 이벤트가 비활성화될 수 있도록 상태를 관리해 주는 용도로 만들었다.

그런 후 이제 버튼을 누르면 새로운 버튼이 생기게 하는 코드를 작성해 주겠다.

void onPressedButton() {
  if (showButton) {
    // 버튼이 화면에 보이는 상태라면 버튼 숨기기
    setState(() {
      showButton = false;
    });
  } else {
    setState(() {
      showButton = true; // 버튼 보이게 하기
    });
  }
}

이제 이렇게 해주면 버튼을 눌렀을 때 새로운 버튼이 나타나게 할 수 있게 된다.

ElevatedButton(
  onPressed: () {
    onPressedButton(); // 호출!
  },
  child: Text('Click'),
)

이렇게 호출을 해줬으면 옆에 나타나고 사라지는 것을 구현해 주면 되겠다.

간단하게 삼항 연사자를 사용해 주면 빠르게 만들어줄 수 있다.

showButton ? 
ElevatedButton(
  onPressed: () {},
  child: Text('클릭'),
):
SizedBox(),

이제 첫 번째 'Click' 버튼을 눌러본다면 옆에 새로운 버튼이 생기고 다시 누르면 사라지게 될 것이다. 이제 다 왔다.

showButton이 true가 되어서 버튼이 생성된다면 잠시 동안은 터치 이벤트를 무시하게 만들어주면 된다.

이제 여기서 아까 전에 만들었던 ignoreButton 변수를 사용해 주면 된다.

void onPressedButton() {
  if (showButton) {
    setState(() {
      showButton = false;
    });
  } else {
    setState(() {
      showButton = true;
      ignoreButton = true; // 초기엔 터치 비활성화
    });
    Timer(Duration(milliseconds: 750), () {
      if (showButton) {
        setState(() {
          ignoreButton = false; // 750 밀리초 후 터치 활성화
        });
      }
    },);

  }
}

showButton이 false인 상태라면 즉 화면에 보이지 않는 상태라면 화면에 보이게 해 줌과 동시에 터치 이벤트를 비활성화시켜 준다.

그 후 타이머를 작동시켜서 750 밀리초 후에는 터치가 활성화되게 해 주면 기능 부분은 끝나게 된다.

이제 밑의 UI 부분에 IgnorePointe를 넣어주면 완성이다.

showButton ?
IgnorePointer(
  ignoring: ignoreButton,
  child: ElevatedButton(
    onPressed: () {},
    child: Text('클릭'),
  ),
):
SizedBox(),

이제 이 코드에서 UI 부분에 좀 더 자연스럽도록 AnimatedSwitcher 위젯과 AnimatedOpacity 위젯을 사용해 주면 IgnorePointer의 사용법 예제는 이것으로 끝나게 된다.

 

 

이렇게 IgnorePointer 위젯에 대해서 알아보았다. 이 위젯은 위에서 보여주는 예제 말고도 그냥 리스트에다가 애니메이션 넣고 터치 못하게 막는다든지 디자인용으로 위젯 배치하고 막는 용도로도 많이 사용하는 위젯이라 활용도가 높다. 암튼 도움이 되었길 바라며 마치겠다.