이전에 GestureDetector()을 사용해서 제스쳐를 통해 Widget을 제어하는 기능을 구현했었다. 간단하게 PseudoCode를 작성하면 다음과 같은 형식이다.GestureDetector( onHorizontalDragStart: (DragStartDetails details) { viewModel .updateDragStartPoint(details.globalPosition.dx); }, onHorizontalDragEnd: (DragEndDetails details) { viewModel.initializeDragStartPoint(); }, onHorizontalDragUpdate: (DragUpdateDeta..

문제의 시작Flutter로 InteractiveViewer를 사용해서 큰 이미지나 콘텐츠를 확대/축소할 수 있는 기능을 구현할 일이 생겼다. 사용자가 2배, 3배로 확대해서 볼 수 있게 하는 건데, 문제는 확대한 상태에서 사용자가 현재 어느 부분을 보고 있는지 알기 어렵다는 것이었다.요구사항은 간단했다: "확대했을 때 현재 보고 있는 영역을 작은 박스로 표시해주세요. 포토샵 네비게이터 패널처럼요."처음엔 "아, 그거 쉽지"라고 생각했는데... 막상 구현해보니 생각보다 복잡했다. 특히 좌표계 변환 부분에서 꽤 삽질을 했다.왜 ViewportIndicator가 필요한가?사용자가 큰 이미지나 영상을 확대할 때의 문제점을 생각해보자:🔍 2배 확대하면 전체의 1/4만 화면에 보임📍 현재 어느 부분을 보고 있는..