加载时颤振圆形头像背景颜色

Flutter Circular Avatar background color while loading

我使用了两个圆形头像(第一个是白色背景,只是稍微大一点,以创建一个白色边框)。 第二个也将背景 属性 设置为白色。 但是在加载图像之前,我看到了蓝色背景。正如您从代码中看到的那样,背面没有任何蓝色小部件...... 我希望在小部件加载图片时有黑色或白色背景。

return Scaffold(
      backgroundColor: Colors.white,
      body: Container(
        padding: const EdgeInsets.only(top: 30),
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        color: appColor,
        child: SingleChildScrollView(
          scrollDirection: Axis.vertical,
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const SizedBox(
                  width: 0,
                  height: 20,
                ),
                const Center(
                  child: Text(
                    'WhyBye ',
                    style: TextStyle(
                      color: Colors.white,
                      fontFamily: 'Savor',
                      fontSize: 40,
                    ),
                  ),
                ),
                const SizedBox(
                  width: 0,
                  height: 10,
                ),
                Stack(
                  //& Stack contenente l'immagine del profilo.
                  children: [
                    _image != null
                        ? CircleAvatar(
                            radius: 100,
                            backgroundColor: Colors.white,
                            child: CircleAvatar(
                              radius: 96,
                              backgroundImage: MemoryImage(_image!),
                            ))
                        : CircleAvatar(
                            radius: 100,
                            backgroundColor: Colors.white,
                            child: CircleAvatar(
                              radius: 96,
                              backgroundImage: Variables.userPicUrl.isNotEmpty
                                  ? NetworkImage(Variables.userPicUrl)
                                  : null,
                            )),
                    Positioned(
                      //& All'interno del precedente Stack, posizionamento dei pulsanti immagine dalla galleria/fotocamera.
                      bottom: -10,
                      left: 15,
                      child: IconButton(
                        onPressed: () {
                          selectImage(ImageSource.gallery);
                        },
                        icon: const Icon(Icons.photo_library_rounded),
                        color: Colors.white,
                        iconSize: 32,
                      ),
                    ),
                    Positioned(
                      bottom: -10,
                      left: 135,
                      child: IconButton(
                        onPressed: () {
                          selectImage(ImageSource.camera);
                        },
                        icon: const Icon(Icons.add_a_photo),
                        color: Colors.white,
                        iconSize: 32,
                      ),
                    ),

按照 CircleAvatar 的文档:

If a backgroundColor is not specified, the theme's ThemeData.primaryColorLight is used with dark foreground colors, and ThemeData.primaryColorDark with light foreground colors.

我认为您使用的是默认主题(使用蓝色作为原色)。尝试明确定义内圈的透明颜色,这样在加载时你只能看到外圈的颜色

我认为你需要添加

Blockquote

foregroundImage 图片提供者? 圆的前景图像。 [...]

您可以决定使用深色图像