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
Read Next
FLUTTER
How to Make Glowing Play Button Animation in Flutter?
This widget can be used in a UI as play button for a music player, start button for games or even as loading indicator.
FLUTTER
How to Create Instagram like Story Circle Animation in Flutter?
Simple step by step guide on how to create Instagram story circle animation with Flutter.
FLUTTER
Polygon clipper in Flutter
A guide on how to clip images in various polygon shapes using polygon_clipper in Flutter