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.

That is normal behaviour - loading a 600KB image is always going to take a small amount of time to load. Try reducing the size of your image (eg use a JPG), use a `FutureBuilder`, or use `Image.asset` and take advantage of it's `loadingBuilder` parameter — James Allen, Jun 06 '22 at 18:52

score 1 · Answer 1 · answered Mar 07 '21 at 22:43

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

answered Mar 07 '21 at 22:43

Collins Stark

11
1

Chris Wickens · Answer 2 · 2022-04-20T10:37:49.340

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.

Akbar Albar · Answer 3 · 2023-01-02T03:40:31.593

It happens because the image is being loaded. Alternatively, you can use FutureBuilder Widget to handle images as they load here example

...
///future type variable to keep value from future method
late Future<String> futureData;

///future method to fetch some data
Future<String> getData(){
  ///give some duration before return value
  await Future.delayed(Duration(seconds: 1));
  
  //some code if you have some code
  // ....

  ///return string
  return "oke";
}

@override
didChangeDependencies(){
  super.didChangeDependencies();
  futureData = getData();
}

@override
Widget build(BuildContext context){
  Future.delayed(Duration(seconds: 1));
  return Scaffold(
    body: FutureBuilder<String>(
      future: futureData,
      builder:(context, snapshot) {
        ///if loading is done
        if(snapshot.connectionState == ConnectionState.done){
          // if future success
          if(snapshot.hasData){
            ///return widget what you want to show
            return 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()
              )
            );
          }else{
            // if future failed return some widget 
            return Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              child: Center(
                child: Text("Image can't load"),
              )
            );
          }
        }
        ///return progress loading
        return Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          child: Center(
            child: CircularProgressIndicator(),
          )
        );
      },
    ),
  );
}

score 0 · Answer 4 · answered Dec 08 '22 at 13:35

0

As of now it is considered as flutter framework bug. You can check that here. Also it is in Github open issue.

You can do one thing, You can use cached_network_image. While loading your image show your own container or whatever you want.

answered Dec 08 '22 at 13:35

Pranav Dave

393
5
7

Flutter white flicker when pushing route before backgroundImage

4 Answers4