How to avoid Image Area showing Blue before Loading App

user_8188498 0
Viewed 594

I am loading a rectangle logo saved as a .jpg into a CircleAvatar in my App.

When I am restarting my App, the area where the logo is loading appears blue for a few seconds. Then the real logo appears.

This Widget is found within a Stack.

This is how I transform my 1080x1073 image into a round logo within Flutter.

 Container(
                width: size.width * 0.5,
                height: size.width * 0.5,
                child: CircleAvatar(
                  backgroundImage: AssetImage('assets/images/logo.jpg'),
                ),
              ),

Does this happen because my image is too big? How should I handle this problem?

P.S. I am testing this on Visual Studio Code.

flutter
4 Answers

By default the background color is set to blue, you can modify the property and it will show whatever color you assign to it.

              Container(
                width: size.width * 0.5,
                height: size.width * 0.5,
                child: CircleAvatar(
                  backgroundColor: Colors.red, //here
                  backgroundImage: AssetImage('assets/images/logo.jpg'),
                ),
              ),
user_65579580

This has more to do with the delay it takes to load an image. You can change the background color like Yudhishthir suggested if the color is the actual problem or you can pre-fetch the image so that the image loads before anything is built.

This answer describes how to do the image pre-fetch using the precacheImage function.

user_65143180
user_86916120

Had similar blue background then changed to InkWell:

      child: InkWell(
        onTap: () async {
          myFunc();
        },
        child: Container(
          width: 50,
          height: 50,
          clipBehavior: Clip.antiAlias,
          decoration: BoxDecoration(shape: BoxShape.circle),
          child: Image.asset(
            'assets/images/mybutton.png',
            fit: BoxFit.cover,
          ),
        ),
      ),
user_161692480
Related