Flutter Button을 Transform 으로 감싸면 작동이 안되는 문제

[시작]

버튼의 위치를 위젯을 직접 움직여서 구현 하는 것이 아닌, transform.translate 을 이용하여 화면에 이동 시켜서 구현 하고 싶었다. 

 

 

[문제]

근데 1번의 버튼은 오렌지 부분에 호버를 해도 버튼으로 인식이 되지만, 2번 버튼은 애매하게 오른쪽 1/3 부분이 버튼의 기능을 하지 못하는 것이다. 

 

근데 이게 이제 나만의 문제가 아님을 깨달았다. 

The 'onPressed' doesn't work with 'Transform' flutter

보니까 다들 transform.translate 의 offset 조절 이후 버튼 onPressed 가 작동하지 않는다는 글이 꽤 있었다. 

다들 Stack에 담아서 position으로 위치를 조정해주라는데 이상하게 position으로 하면 사라짐 ... 버튼이 그냥 화면에서 안보여요... 그리고 내 코드는 ListView에 widget 들을 return 해주고 최상위 부모가 크기를 정해주기 때문에 스택을 만들어버릴 수가 없었다. 

 

[원인]

문제에서 설명한 것 처럼 다른 개발자들은 Stack 혹은 GestureDetector 를 이용하여 해결 하였지만 아무리해도 해결이 되지 않았음. 

 

이유가 무엇이냐면 Flutter에서는 Transform 위젯이 일시적으로 그래픽을 변환한다. 따라서, Transform 위젯을 사용해서 버튼을 이동시키는 것은 그 위치에서 버튼을 클릭 할 수가 없다는 것이다. 

 

[해결]

나는 사실 아직까지도 해결을 못했다. 한다면 글로 남기겠다. 하지만 대부분의 해결 방법은 실제로 위젯을 이동시키는 방법뿐이고 그걸 하는 것이 Stack 과 Postioned 이다.