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,
),
),
Following the documentation of 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.
I think you're using the default theme (which uses blue as primary color). Try to explicitly define s transparent color to the inner circle so while it's loading you only see the color of the outer circle