[flutter] flutter_svg에서 이미지 캐싱(caching)을 적용하는 방법은?

08 Dec 2023

flutter

flutter_svg는 SVG 이미지를 로드하는 데 사용되는 플러터(Flutter) 패키지입니다. 이미지를 로드하고 렌더링하는 동안 캐싱(caching)을 적용하려면 flutter_svg에서 제공하는 콜백을 이용하여 직접 처리해야 합니다. 다음은 flutter_svg에서 이미지 캐싱을 적용하는 방법입니다.

이미지 캐싱 구현하기

이미지 캐시용 맵(Map) 생성: 이미지 URL을 키로 사용하여 로컬에 이미지를 캐시할 맵(Map)을 생성합니다.
```
 Map<String, Uint8List> imageCache = {};
```

이미지 로드 및 캐싱 처리: 이미지를 로드하고 캐싱하는 과정을 표현하는 함수를 생성합니다.

 Future<Uint8List> loadAndCacheImage(String url) async {
   if (imageCache.containsKey(url)) {
     return imageCache[url];
   } else {
     var imageBytes = await YourImageLoadingFunction(url);   // 이미지를 로드하는 함수 호출
     imageCache[url] = imageBytes;
     return imageBytes;
   }
 }

flutter_svg 위젯에서 이미지 로드: flutter_svg 위젯을 이용하여 이미지를 로드할 때, 앞서 구현한 이미지 캐싱 함수를 콜백으로 넘겨줍니다.

 SvgPicture.network(
   'https://example.com/image.svg',
   placeholderBuilder: (BuildContext context) => CircularProgressIndicator(),
   imageByte: (Uint8List bytes) => bytes != null ? MemoryImage(bytes) : null,
   onImageError: (exception, stackTrace) {
     // Handle error
   },
   httpHeaders: {},
   // 이미지 캐싱 함수 적용
   loader: (String url) => loadAndCacheImage(url),
 )

결론

flutter_svg에서 이미지 캐싱을 적용하기 위해서는 이미지를 로드하고 캐싱하는 동작을 명시적으로 구현해야 합니다. 제안된 방법을 통해 flutter_svg를 사용하면서 효과적으로 이미지를 캐싱할 수 있습니다.

이 외에도 다른 패키지를 사용하거나 직접 네이티브 코드를 통해 이미지 캐싱을 처리할 수도 있지만, flutter_svg 내부에서의 캐싱은 이러한 방식으로 구현됩니다.

더 많은 정보를 원하신다면, flutter_svg 공식 문서를 참고하세요.