Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Flutter Circular Avatar background color while loading

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

>Solution :

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading