Flutter image preload - dart

Question

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.

Answer 1

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();
}
}

Answer 2

I had problems with the upper solution which uses precacheImage() inside initState. The code below resolved them. Also note that you might not see expected results in the debug mode but only in the release mode.
Image myImage;
#override
void initState() {
super.initState();
myImage= Image.asset(path);
}
#override
void didChangeDependencies() {
super.didChangeDependencies();
precacheImage(myImage.image, context);
}

Answer 3

There is a good article on this subject : https://alex.domenici.net/archive/preload-images-in-a-stateful-widget-on-flutter
It should look something like this
class _SampleWidgetState extends State<SampleWidget> {
Image image1;
Image image2;
Image image3;
Image image4;
#override
void initState() {
super.initState();
image1 = Image.asset("assets/image1.png");
image2 = Image.asset("assets/image2.png");
image3 = Image.asset("assets/image3.png");
image4 = Image.asset("assets/image4.png");
}
#override
void didChangeDependencies() {
super.didChangeDependencies();
precacheImage(image1.image, context);
precacheImage(image2.image, context);
precacheImage(image3.image, context);
precacheImage(image4.image, context);
}
#override
Widget build(BuildContext context) {
return Container(
child: Stack(
children: <Widget>[
image1,
image2,
image3,
image4,
],
),
);
}
}

Answer 4

To get rid of the "blink", you can simply use the FadeInImage class in combination with transparent_image, which will fade instead of appearing instantly. Usage, in your case, looks as follow:
// you need to add transparent_image to your pubspec and import it
// as it is required to have the actual image fade in from nothing
import 'package:transparent_image/transparent_image.dart';
import 'package:flutter/material.dart';
...
FadeInImage(
placeholder: MemoryImage(kTransparentImage),
image: AssetImage('image.png'),
)

Answer 5

The precacheImage() function (as used in most of the answers) returns a Future, and for certain use case scenarios it can be really useful. For instance, in my app I needed to load an external image and like everyone else did not want to experience the flickering. So I ended up with something like this:
// show some sort of loading indicator
...
precacheImage(
NetworkImage(),
context,
).then((_) {
// replace the loading indicator and show the image
// (may be with some soothing fade in effect etc.)
...
});
Please note that, in the above example I wanted to illustrate how the Future can be potentially used. The comments are just to help express the idea. Actual implementation has to be done in a Fluttery way.

Answer 6

I had the following problem: image requires some space. So after loading, it pushed UI down which is not good for UX. I decided to create a builder to display an empty (or loading) container until the image is loaded and after that display my UI.
Looks like precacheImage returns future which is resolved. The tricky part for me was FutureBuilder and snapshot.hasData which was always false because future is resolved with null. So I added future transformation to fix snapshot.hasData:
precacheImage(this.widget.imageProvider, context).then((value) => true)
I'm not sure is it ok to call precacheImage multiple times so I decided to wrap it into StatefulWidget.
You can check the final builder here
Use builder the following way:
return PreloadingImageBuilder(
imageProvider: AssetImage("assets/images/logo-main.png"),
builder: (context, snapshot) {
if (snapshot.hasData) {
return Scaffold(
...
);
} else {
return Container();
}
},
);

Answer 7

Depending on your logic and UX, something like this can work too (when pushing a new route with images):
Future.wait([
precacheImage(AssetImage("assets/imageA.png"), context),
]).then((value) {
Navigator.pop(context);
Navigator.pushReplacement(
context,
YourRouteRoute()
);
});

Answer 8

late AssetImage assetImage;
#override
void initState() {
assetImage = const AssetImage("$kImagePath/bkg2.png");
super.initState();
}
#override
void didChangeDependencies() {
precacheImage(assetImage, context);
super.didChangeDependencies();
}