Image asset loading too slow

Question

I have noticed a problem where image asset loading is too slow to be useable.

In this simple example (below) when the image is loaded you can see an initial screen and then the image asset loads and appears on the screen.

I was expecting to see everything drawn in one go rather than seeing the asset being loaded

  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Positioned.fill(child: Image.asset(imagePaths[6], fit: BoxFit.cover)),
        ]
    )
    );
  }

Any idea what i can do to make these images load faster? Even in release build its loading the asset so slow the user can see it

Answer 1

The speed of loading images from assets seems fine to me. It may have something to do with the size and number of images you're trying to display. Could you provide a minimal repro demonstrating the issue? I'd like to get a baseline speed on your approach of loading the images and to see if there's a way to improve it.

As mentioned in the comments above, you can also try preloading the image assets using precacheImage before the screen is displayed. A simple implementation of this should look like:

AssetImage assetImage;

@override
void initState() {
  super.initState();

  assetImage = AssetImage('assets/yourimage.png');
  precacheImage(assetImage, context);
}

@override
  Widget build(BuildContext context) {
  // build your screen here
  Image(image: assetImage);
  // build your screen here
}