How does Flutter cache images, and what does precacheImage do?
Short Answer
Flutter's ImageCache automatically caches decoded images in memory by default so repeated use of the same image doesn't re-decode it; precacheImage() lets you proactively load and decode an image into that cache before it's actually displayed, avoiding a visible pop-in.
Image.network/Image.asset use an ImageProvider that resolves through Flutter's global ImageCache, keyed by the image's configuration. Once decoded, subsequent uses of the same image are instant, up to the cache's size limits, which you can tune for image-heavy apps.
precacheImage(imageProvider, context) triggers the decode-and-cache step ahead of time — commonly called during a splash/loading screen for images you know will be needed soon, so when the image actually needs to render, it appears instantly instead of showing a blank space while decoding.
Code Example
@override
void didChangeDependencies() {
super.didChangeDependencies();
precacheImage(const AssetImage('assets/next_screen_hero.png'), context);
}Common Mistakes
- ×Loading large, unresized images at full resolution — decoding at full resolution wastes memory even with caching; use cacheWidth/cacheHeight to decode at display size.
- ×Not accounting for the ImageCache's size limits when working with many large images, causing thrashing.