Flutter white flicker when pushing route before backgroundImage

Question

In my flutter app, after the splash screen animation is finished, it pushes to the HomeRoute.

The HomeRoute has a backgropundImage which is intended to cover the whole screen:

HomeRoute.dart:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          decoration: BoxDecoration(
              image: DecorationImage(
                  image: AssetImage("assets/images/mainBgndsmall.png"),
                  fit: BoxFit.cover)),
          child: SafeArea(child: _buildBody())),
    );
  }

When the route is pushed, there is a white flicker before the backgroundImage is showed.

Is that a normal behavior or am I doing something wrong when trying to put an image as a background?

Image size is about 500KB or 600KB aprox. PNG image.

Answer 1

The image has not loaded yet that is why the container loads before the image comes up

you can fix it by using a future builder which will display a circular progress indictor until the image is loaded and ready to be rendered

Answer 2

You can use precacheImage in your didChangeDependencies method to increase the chances of your image being loaded prior to the widget being displayed, preventing the white flicker.

@override
void didChangeDependencies() {
  super.didChangeDependencies();
  precacheImage(const AssetImage("assets/images/mainBgndsmall.png"), context);
}

You may need to convert your widget to a StatefulWidget first in order to pass a BuildContext.