[Flutter] GestureDetector 갖고놀기 1. 아주 작고 귀여운 이미지 뷰어 만들기

순서
0. 문제가 많은 첫 버전
1. Scale Transition으로 오버플로우 없애기
2. Container, Center 위젯으로 가운데에 정렬하기
3. 사실 플러터에서 이미 이미지 뷰어를 제공해주고 있다.

탭을 인식할 때만 썼던 제스처 디텍터(GestureDetector) 위젯. 하지만 할 수 있는 일이 더 많다고 해서 이번에는 제스처 디텍터를 갖고 놀기로 했다. 바로 이미지 뷰어 만들기! 하지만 주 목적은 줌인/아웃을 인식하는데 있기 때문에 정말 진짜 간단하게 줌인/아웃만 인식하도록 만들어봤다.

0. 문제가 많은 첫 버전

제스처 디텍터 위젯은 이런 파라미터를 받을 수 있다.

GestureDetector(
      onScaleUpdate: _onScaleUpdate,

여기에 넘겨주는 함수는 이렇게 생겼는데...

void _onScaleUpdate(ScaleUpdateDetails details) {
  // 할 일
}

사용자가 손가락 2개 이상으로 줌인/아웃을 하는 동안 실행된다. 이 때 파라미터로 받을 수 있는 ScaleUpdateDetails는 이렇게 생겼다.

ScaleUpdateDetails(focalPoint: Offset(207.0, 448.0),
	localFocalPoint: Offset(207.0, 448.0),
	scale: 0.7749511677469815,
	horizontalScale: 0.8235294117647058,
	verticalScale: 0.7086092715231788,
	rotation: 0.07369566114544535,
	pointerCount: 2)

잘 보면 scale 정보도 받아올 수 있다. 즉, 사용자가 사진을 얼마나 확대 했는지, 혹은 얼마나 축소 했는지 알 수 있는 것이다. (1보다 작으면 축소, 1보다 크면 확대한 경우다.) 그래서 단순하게 원래 가로, 세로 길이에다가 이 scale 값을 곱해주면 되겠지! 라고 생각했다.

역시 뭐든 바로 되는 일이 없다.
1. 확대 시 오버플로우 문제 발생
2. 축소 시 가운데 정렬이 되지 않음

1. Scale Transition으로 오버플로우 없애기

오버플로우가 생긴다는건 이미지의 가로, 세로 크기가 화면 크기를 넘어간다는 뜻이다. 그러면 이미지의 최대 크기가 화면의 크기를 넘어가지 않으면서 확대도 되게 만들면 된다. 이미지 크기를 화면 크기와 scale값을 곱한 크기 중 최솟값으로 정하고, 스케일 애니메이션을 사용해서 확대가 가능하게 만들었다.

Transform.scale(
  scale: scale,
  child: Image.asset(
    CommonConstants.BROCCOLI_IMAGE_PATH,
    width: _fitImageWidth(),
    height: _fitImageHeight(),
  ),
),

이제 나머지 문제가 남았다.
1. 확대 시 오버플로우 문제 발생
2. 축소 시 가운데 정렬이 되지 않음

2. Container, Center 위젯으로 가운데에 정렬하기

생각보다 쉽게 해결됐다. 이미지 뷰어는 스택 위젯 안에 배경으로 검은색 컨테이너가 있고 그 위에 확대/축소 되는 이미가 쌓여있다. 이 이미지를 컨테이너와 센터 위젯으로 감싸주면 해결!

class _PhotoViewerState extends State<PhotoViewer> {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        _background(),
        _foreground(),
      ],
    );
  }
  
// ...

  Widget _foreground() {
      return SizedBox(
        height: Get.size.height,
        child: Center(
          child: PhotoForeground(),
        ),
      );
    }

사실 플러터에서 이미 제공해주고 있다.

그렇다. 오늘도 역시 삽질을 했다! 하지만 제스처디텍터를 써먹어봤으니 된거라고 생각하고,.,.

만약 원하는 기능이 1. 줌인/아웃이 되고 2. 상하좌우로 이동 가능한 이미지 뷰어라면, 아래 영상을 보자. 플러터가 이미 만들어놓은 InteractiveViewer라는 위젯이 있다.