[flutter] photo_view 패키지의 이미지 로딩 속도 개선하기

04 Dec 2023

flutter

개요

이미지를 확대 및 축소하여 보여주는 기능을 제공하는 photo_view 패키지는 플러터에서 자주 이용되는 패키지 중 하나입니다. 하지만 큰 이미지나 많은 이미지를 로딩할 때 속도가 느리게 느껴지는 경우가 있습니다. 이번 블로그에서는 photo_view 패키지의 이미지 로딩 속도를 개선하는 몇 가지 방법을 알아보겠습니다.

1. 메모리 캐싱 사용하기

photo_view 패키지는 이미지를 로드할 때 모든 이미지를 매번 새로 로드하는 것이 아니라, 이미지를 메모리에 캐싱합니다. 이미지를 다시 로드할 때에는 캐시된 이미지를 사용하여 로딩 속도를 향상시킬 수 있습니다.

PhotoView(
  imageProvider: NetworkImage('https://example.com/image.jpg'),
  loadingBuilder: (BuildContext context, ImageChunkEvent progress) {
    if (progress == null) return const CircularProgressIndicator();
    return Center(
      child: CircularProgressIndicator(
        value: progress.expectedTotalBytes != null
            ? progress.cumulativeBytesLoaded / progress.expectedTotalBytes
            : null,
      ),
    );
  },
),

위의 코드에서 PhotoView 위젯의 loadingBuilder 속성을 통해 이미지 로딩 중에 나타날 위젯을 커스텀할 수 있습니다. 여기서는 로딩 중에 원형 프로그레스 바를 표시하도록 설정했습니다.

2. 압축된 이미지 사용하기

큰 이미지를 로드할 때 발생하는 속도 저하를 해결하기 위해 이미지를 압축하여 사용하는 방법도 있습니다. photo_view 패키지는 이미지를 byte 단위로 로드하기 때문에, 압축된 이미지를 사용하면 로딩 속도를 개선할 수 있습니다.

PhotoView(
  imageProvider: MjpegNetworkImage('https://example.com/image.jpg'),
),

압축된 이미지를 사용하기 위해 MjpegNetworkImage 패키지를 사용할 수 있습니다. 이 패키지는 JPEG 이미지를 M-JPEG 형식으로 압축하여 전송하는 방식을 사용하여 이미지를 로드합니다.

3. 이미지 리사이징하기

photo_view 패키지에서는 이미지의 원본 해상도를 그대로 사용하기 때문에, 원본 이미지가 큰 경우 로딩 속도가 느려질 수 있습니다. 이런 경우에는 이미지를 리사이징하여 로딩 속도를 향상시킬 수 있습니다.

PhotoView(
  imageProvider: NetworkImage('https://example.com/image.jpg'),
  initialScale: PhotoViewComputedScale.contained,
  minScale: PhotoViewComputedScale.contained,
),

initialScale과 minScale 속성을 사용하여 이미지의 초기 스케일과 최소 스케일을 설정하여 이미지를 리사이징할 수 있습니다. 이렇게 하면 이미지가 화면에 보여질 때 스케일이 조정되어 화면에 맞춰져 로딩 속도가 개선됩니다.

결론

photo_view 패키지를 사용할 때 이미지 로딩 속도가 느린 경우, 메모리 캐싱, 압축된 이미지 사용, 이미지 리사이징 등의 방법을 적용하여 속도를 개선할 수 있습니다. 개발자는 프로젝트의 요구 사항에 맞게 적절한 방법을 선택하여 사용할 수 있습니다.

참고 자료

flutter_photo_view 패키지 문서