We can have the images in our assets folder and we are fetch image and Load image from assets folder. It’s take a time to load, Here is a function in Flutter that helps us to do fast — precacheImage()

Many times it happens that your images from local assets take a lot of time to load and render on your screen!

This is not good for the user’s point of view especially if the image is the background image of your screen. If the image is any component in your screen, we can still show default or shimmer or loader that the user gets to know that image is loading. But we can’t show loader for background image right!

We have a simple yet useful method in Flutter which we can use to load our asset images much faster — precacheImage()!

This method good the image into the image cache and then whenever the image is used, it will be loaded much faster. However, Image Cache doesn’t allow to hold very large images.

As the context is needed in this, so we can implement precacheImage() in any function from where context is accessible. We can put the same in didChangeDependencies() method of your 1st load screen in app!

@override
  void didChangeDependencies() {
    precacheImage(AssetImage('assets/nature.jpg'), context);
    super.didChangeDependencies();
  }

You can Download Source Code via Github.

Hope you enjoyed this article!

If you loved it, you can Buy Me A Coffee!