Why is Circle Avatar initially showing blue bg instead of default picture set, flutter?-CodePudding

I have side menu in an app in flutter. The circle avatar is supposed to show a default profile picture since user has not set one. When I first install it, it should look like this:

But this is how it looks like when I first install it....

I want it to show default profile photo instead of blue container. This is the code :

GestureDetector(
                              onTap: () async {
                                newphoto = await Navigator.push(
                                    context,
                                    MaterialPageRoute(
                                        builder: ((context) => ProfilePage(
                                            uname: context
                                                .read<ProfileDetails>()
                                                .name //username,
                                            ))));

                                saveimageside(newphoto);
                              },
                              child: profileimage != ''
                                  ? CircleAvatar(
                                      backgroundImage:
                                          FileImage(File(profileimage)),
                                      radius:
                                          MediaQuery.of(context).size.height *
                                              0.05,
                                    )
                                  : CircleAvatar(
                                      backgroundImage: const AssetImage(
                                          'assets/profile1.png'),
                                      radius:
                                          MediaQuery.of(context).size.height *
                                              0.05,
                                    )),

Outside the build I have :

String profileimage = ''; 

 saveimageside(path) async {
    SharedPreferences saveimageside = await SharedPreferences.getInstance();
    setState(() {
      saveimageside.setString("imagePathside", path);
    });
  }

  loadimageside() async {
    SharedPreferences saveimageside = await SharedPreferences.getInstance();
    setState(() {
      profileimage = saveimageside.getString("imagePathside").toString();
    });
  }

called loadimagesside in initState This code is not fully written by me but someone before me.

The blue container is replaced by default image only when I use remove profile picture feature which sets the path to '' Thats okay but I want the app to show default when user first installs it also

CodePudding user response：

You have checked if its empty but for example when you first opened the app without setting the path then loadimageSide() method is called which will get a null as a result and its saved in the variable profileImage. So now the value of profileImage is "null";

You can manage it when you get the image

loadimageside() async {
    SharedPreferences saveimageside = await SharedPreferences.getInstance();
    setState(() {
      profileimage = saveimageside.getString("imagePathside") ?? "";
    });
  }

Now if the image is null then it will assign an empty string.