flutter 학습기 (2) - onTap 안먹히는 문제 해결

 

초보자도 프로처럼 만드는 플러터 앱 개발(링크) 2주차를 아직 따라하는 중이다.

초보자도 프로처럼 만드는 플러터 앱 개발 | 이정주 - 교보문고

 

지난번에 샘플앱에서 리스트 화면과 상세 화면을 만들고 오늘 onTap 액션으로 리스트 이미지를 클릭해서 상세로 넘어가는 부분부터 학습을 시작했는데, 이미지를 아무리 클릭해도 반응이 없었다.

onTap: () {
    Navigator.of(context).push(
         MaterialPageRoute(
              builder: (context) => DetailScreen(
                    home: homes[index],
              ),
          ),
       );
  },

 

단순히 따라치는 와중에도 수없이 발생하는 오류 메시지에 다소 노이로제가 걸려서 과정을 조금 더 꼼꼼하게 따라가 이번에는 특별한 오류도 없고, 누락한 부분도 없는 것 같은데 해결이 되지 않았다.

 

구글링을 좀 해보니 2020년 즈음에 특정 기종에서 onTap이 먹히지 않는다는 이야기가 있었다. 그치만 좀 옛날 얘기인거 같고 몇개 바꿔가면서 테스트해봐도 onTap이 작동하지 않길래 좀더 찾아보았다.

 

https://stackoverflow.com/questions/52965799/flutter-gesturedetector-not-working-with-containers-in-stack

Flutter- GestureDetector not working with containers in stack

GestureDetector가 있는 2개의 컨테이너에 각각 onTap을 적용했는데 하나의 컨테이너에서 onTap이 먹히지 않는다는 내용이다. 여러가지 해결책에 대한 제안이 있었는데 AbsorbPointer로 컨테이너 감싸기로는 실패, GestureDetector 대신 Inkwell 사용하기로 해결했다. 아직은 각 명령어? 들에 대한 이해없이 코드만 따라 쳐보고 있어서 왠지 좀더 다른 해결책을 사용해보고 싶다는 생각에 다시 GestureDetector로 원복했는데 갑자기 클릭 이벤트가 잘 먹혔다...?

 

정리하면서 위 포스트를 다시 읽어보니 Inkwell은 머티리얼 컴포넌트로, 단순 클릭 이벤트를 위해서는 GestureDetector를 쓰는 것이 좋다고 한다. 그리고 첫번째 해결책으로 나와있었던 HitTestBehavior.translucent를 사용하라고 한다(요건 시도 안해봄). Flutter Docs를 보니 Inkwell을 쓰면 터치포인트에 동그랗게 퍼져나가는 이펙트가 추가되는 것 같다.

FYI, InkWell is a material component. It adds visual/sound feedback which may not be something that a developer wants. Also, it is possible for app to be using iOS Cupertino theme. If you are only interested in tap/click events, GestureDetector is a good option. (with HitTestBehavior.translucent) 

 

블로그로 학습기를 남기니 해결되면 그냥 넘어갈 문제들을 한번 더 확인하고 넘어가서 좋은 것 같다! 아직 아주 디테일한 부분을 학습하고 있진 않지만 일단 한번 빨리 따라하고 전체적인 구조를 이해하는 것으로. 그래도 자주 반복되는 구문들이 많다보니 잘 들여쓰기해서 따라하는 것도 조금씩 익숙해지고 있다.