Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter image preload

Tags:

flutter

dart

Is it possible to preload somehow the image on the app start? Like I have an background image in my drawer but for the first time when I open the drawer I can see the image blinks like it is fetched from assets and then displayed and it gives bad experience to me once I see it for the first time other openings of the drawer are behaving as expected because it is cached. I would like to prefetch it on the app load so there is no such effect.

like image 852
Mugetsu Avatar asked Jul 14 '18 22:07

Mugetsu


People also ask

How do you preload network images in Flutter?

We add void initState() method. In this method, we will add variable image1 and image 2 is equal to add images from your assets folders. Now that all images have been preloaded, we can use them in our build method. In the body, we will add a Center widget.

How do I quickly load asset images in Flutter?

We have a simple yet useful method in Flutter which we can use to load our asset images much faster — precacheImage()! This method prefetches the image into the image cache and then whenever the image is used, it will be loaded much faster.


1 Answers

Use the precacheImage function to start loading an image before your drawer is built. For example, in the widget that contains your drawer:

class MyWidgetState extends State<MyWidget> {    @override   void initState() {     // adjust the provider based on the image type     precacheImage(new AssetImage('...'));     super.initState();   }  } 
like image 81
Jonah Williams Avatar answered Oct 06 '22 01:10

Jonah Williams