FLUTTER

The Right Way to Preload or Precache Images in Flutter for Extreme Fast Rendering?

The solution is quite simple. We need to pre-load the image before it is rendered. If it is preloaded and cached, the rendering of image when needed may seem instantaneous. Okay let's see how can we implement Precaching in Flutter.

Here in this tutorial, we will learn the correct way to pre-cache a network image.

This is the code required for precaching an image. We use precacheImage() function for precaching an image. But the function can't be called inside the initState(). If you try to call the function inside the initState(), it may throw an error "dependOnInheritedWidgetOfExactType< MediaQuery>() or dependOnInheritedElement() was called before _MyHomePageState.initState() completed". So we call precacheImage(theImage.image, context) inside didChangeDependencies() which is called after the initState.

Images showing the how a large size image is displayed in a slow network after pre caching