[Flutter] Visibility와 Opacity 차이

Visibility의 경우에는 해당 위젯이 눈에 보이는지 아예 보이지 않는지에 대한 처리를 한다. (영역을 차지하지 않는다.) 

Opacity의 경우에는 해당 위젯이 얼만큼 보이는지 opacity값을 조절한다. (영역을 차지한다.)

 

Visibility(visible: true, child: Container())

Opacity(opacity: 1, child: Container())

 

Flutter로 개발함에 있어서 위의 내용만 이해를 한다면 클릭 이벤트에서 문제가 생길 여지가 있다.

 

특정 물체에 클릭 이벤트를 주고 싶은 경우에 GestureDetector를 이용하는데, Visibility로 감싼 위젯의 경우에는 false 상태에서 이벤트를 받지 않지만, Opacity로 감싼 위젯의 경우에는 opacity 0에서 클릭 이벤트를 먹는다.

 

따라서, Opacity로 감싼 위젯을 상위에 놓고 아래에 GestureDetector로 감싼 위젯이 있는 경우에는 클릭 이벤트를 받지 않는다.

따라서 상위에 있는 위젯이 Opacity로 감싸져 있는 상태고 다른 위젯과 겹쳐있는 경우에는 IgnorePointer위젯을 감싸서 클릭 이벤트를 무시해야 한다. 

 

IgnorePointer(ignoring: true, child: Opacity(opacity: 1, child: Container()),)