Flutter Circular Avatar background color while loading

Question

I used two circular avatar (the first one with a white background just a little bigger to create a white border). Also the second one have the background property set to white. However before the image is loaded I see a blue background. As you can see form the code there are no one blu widget on the back... I wold like to have a black or white background while the widget is loading the picture.

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,
                      ),
                    ),

Answer 1

I think you need to add

Blockquote

foregroundImage ImageProvider? The foreground image of the circle. [...]

you could decide to use a dark image