Как сделать так, чтобы область изображения не отображалась синим перед загрузкой приложения

Question

Я загружаю прямоугольник lo go, сохраненный как .jpg, в CircleAvatar в моем приложении.

Когда я перезапускаю свое приложение, область, где загружается lo go, отображается синим цветом для несколько секунд. Затем появляется реальный lo go.

Этот виджет находится в стеке.

Вот как я преобразовываю свое изображение 1080x1073 в круглое lo go во Flutter.

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

Это происходит из-за того, что мое изображение слишком велико? Как мне решить эту проблему?

PS Я тестирую это на Visual Studio Code.

Answer 1

Это больше связано с задержкой, необходимой для загрузки изображения. Вы можете изменить цвет фона, как предложил Юдхиштхир, если цвет является реальной проблемой, или вы можете предварительно загрузить изображение, чтобы оно загружалось до того, как что-либо будет построено.

Этот ответ описывает, как для предварительной выборки изображения с помощью функции precacheImage.

Answer 2

Это решение Cookbook предназначено для этой ситуации. Просто замените CircularProgressIndicator тем, что вы хотите показать до загрузки изображения.

https://flutter.dev/docs/cookbook/images/fading-in-images

Answer 3

По умолчанию цвет фона установлен на синий, вы можете изменить свойство, и оно будет отображать любой цвет, который вы ему назначили.

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