[Flutter] Image cache(precacheImage)와 WidgetsFlutterBinding, PaintingBinding

 

이번 포스팅에서는 Flutter에서 image를 사전 cache 하는 법과 cache 된 이미지들이 어디에 저장되는지 알아보겠습니다. 

Asset 이미지들의 경우 실제로 사용할 때 초반에 잠시 깜빡이는 동작이 발생합니다. 이것은 아직 메모리에 로드되지 않았기 때문입니다. 사전캐싱 처리를 한다면 깜빡이는 동작 없이 바로 이미지를 보여줄 수 있습니다. 

 

 

1. Image Widget

2. PaintingBinding, WidgetsFlutterBinding

3. precacheImage

 

 

 

1. Image Widget

일반적으로 flutter에서 이미지 위젯을 구현할 때 image 관련 패키지를 사용하거나 flutter 자체에서 제공하는 Image 위젯을 사용합니다. Image 위젯에서는 한 번 이미지를 생성하면 cache를 하도록 돼 있습니다. Image 클래스의 _resolveImage 함수가 그 역할을 합니다. _resolveImage 함수에서 ImageProvider 클래스의 resolve함수를 호출하고, resolve함수에서는 resolveStreamForKey 함수를 호출해서 PaintingBinding -> imageCache 클래스의 _cache 변수에 이미지를 저장합니다. 

 

 

 

2. PaintingBinding, WidgetsFlutterBinding

그럼 이미지 데이터를 저장하는 PaintingBinding 클래스는 어디에 있는걸까요? PaintingBinding은 mixin클래스로 WidgetsFlutterBinding 클래스에서 사용하고 있습니다. WidgetsFlutterBinding 클래스에서는 PaintingBinding 외에도 GestureBinding, SchedulerBinding, ServicesBinding, SemanticsBinding, RendererBinding, WidgetsBinding 등의 mixin클래스들을 사용하고 있습니다. WidgetsFlutterBinding 클래스는 일반적으로 main 함수에서 WidgetsFlutterBinding.ensureInitialized(); 코드로 자주 사용됩니다. ensureInitialized 함수를 호출해서 static으로 여러 mixin 클래스들을 초기화시켜 줍니다. 다시 말해 관습적으로 main에서 호출하던 ensureInitialized 함수는 Flutter 엔진에서 사용하는 여러 클래스들을 초기화(인스턴스화) 시켜주는 역할을 합니다. 

PaintingBinding의 경우에는 initInstances 함수에서 _imageCache 변수를 생성해주고 있습니다. 이미지 캐시 데이터들을 가지고 있는 ImageCache클래스는 독자적으로 static하게 존재하는 것이 아니라 WidgetsFlutterBinding ->  PaintingBinding 클래스의 내부에 존재하고 있었습니다. 

 

 

3. precacheImage

그러면 이론적인 설명은 차치하고, 이미지를 사전캐싱하는 방법을 알아보겠습니다.

사전 캐싱을 하기 위해서는 precacheImage 함수를 호출해야 합니다. precacheImage 함수는 image.dart파일에서 전역 함수로 존재합니다. 

precacheImage(const AssetImage("여기에 assets 파일의 경로를 넣으세요"), context);

 

위와 같이 호출하면 이미지가 캐시되고, 해당 이미지를 사용할 때 바로 딜레이 없이 로드되는 것을 확인할 수 있습니다.