How should I do to add text inside a widget, so that in this way I can notify the user of my app that they can change their profile picture by pressing that camera button I want to insert the text "Change your profile picture here" into the widget _Foto?

my goal is that under the profile image there is a text so that the user knows that he can change his profile image by clicking on the button

Widget _Foto() {
return new GestureDetector(
  onTap: () => imagePicker.showDialog(context),
  child: new Center(
      child: _image == null
          ? FutureBuilder<String>(
              future: globals.SharedPreferencesHelper
                  .getDataAgentUserProfileImage(),
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  return new Stack(children: [
                    Container(
                      margin: EdgeInsets.only(top: 48),
                      height: 0,
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(16.0),
                      ),
                    ),
                    Align(
                        alignment: Alignment.topCenter,
                        child: SizedBox(
                          child: CircleAvatar(
                            radius: 40.0,
                            backgroundColor: Colors.white,
                            child: CircleAvatar(
                              child: Align(
                                alignment: Alignment.bottomRight,
                                child: CircleAvatar(
                                  backgroundColor: Colors.white,
                                  radius: 20.0,
                                  child: Icon(
                                    Icons.camera_alt,
                                    size: 25.0,
                                    color: Color(0xFF404040),
                                  ),
                                ),
                              ),
                              radius: 38.0,
                              backgroundImage: new NetworkImage(
                                  systemProfilesUsersImagesRepository  
                                      snapshot.data!),
                            ),
                          ),
                        )),
                  ]);
                } else if (snapshot.hasError) {
                  return Stack(
                    children: <Widget>[
                      new Center(
                        child: new CircleAvatar(
                          radius: 50.0,
                          backgroundColor: Colors.white,
                        ),
                      ),
                      new Center(
                        child: Container(
                            width: 100.0,
                            height: 100.0,
                            decoration: new BoxDecoration(
                                shape: BoxShape.circle,
                                image: new DecorationImage(
                                    fit: BoxFit.fill,
                                    image: new AssetImage(
                                        "images/userpic.png")))),
                      ),
                    ],
                  );
                } else {
                  return Container(
                      width: 100.0,
                      height: 100.0,
                      decoration: new BoxDecoration(
                          shape: BoxShape.circle,
                          image: new DecorationImage(
                              fit: BoxFit.fill,
                              image:
                                  new AssetImage("images/userpic.png"))));
                }
              })
          : new Container(
              height: 100.0,
              width: 100.0,
              child: new CircleAvatar(
                radius: 40.0,
                backgroundColor: Colors.white,
                child: CircleAvatar(
                  child: Align(
                    alignment: Alignment.bottomRight,
                    child: CircleAvatar(
                      backgroundColor: Colors.white,
                      radius: 20.0,
                      child: Icon(
                        Icons.camera_alt,
                        size: 23.0,
                        color: Color(0xFF404040),
                      ),
                    ),
                  ),
                  radius: 38.0,
                  backgroundImage: FileImage(_image!),
                ),
              ),
            )),
);

CodePudding user response：

You can wrap the Center widget Column and include another Text child.

Widget _Foto() {
  return GestureDetector(
    onTap: () => imagePicker.showDialog(context),
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Center(
            child: _image == null
                ? FutureBuilder<String>(
                    future: globals.SharedPreferencesHelper
                        .getDataAgentUserProfileImage(),
                    builder: (context, snapshot) {
                      if (snapshot.hasData) {
                        return Stack(children: [
                          Container(
                            margin: EdgeInsets.only(top: 48),
                            height: 0,
                            decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.circular(16.0),
                            ),
                          ),
                          Align(
                              alignment: Alignment.topCenter,
                              child: SizedBox(
                                child: CircleAvatar(
                                  radius: 40.0,
                                  backgroundColor: Colors.white,
                                  child: CircleAvatar(
                                    child: Align(
                                      alignment: Alignment.bottomRight,
                                      child: CircleAvatar(
                                        backgroundColor: Colors.white,
                                        radius: 20.0,
                                        child: Icon(
                                          Icons.camera_alt,
                                          size: 25.0,
                                          color: Color(0xFF404040),
                                        ),
                                      ),
                                    ),
                                    radius: 38.0,
                                    backgroundImage: NetworkImage(
                                        systemProfilesUsersImagesRepository  
                                            snapshot.data!),
                                  ),
                                ),
                              )),
                        ]);
                      } else if (snapshot.hasError) {
                        return Stack(
                          children: <Widget>[
                            Center(
                              child: CircleAvatar(
                                radius: 50.0,
                                backgroundColor: Colors.white,
                              ),
                            ),
                            Center(
                              child: Container(
                                  width: 100.0,
                                  height: 100.0,
                                  decoration: BoxDecoration(
                                      shape: BoxShape.circle,
                                      image: DecorationImage(
                                          fit: BoxFit.fill,
                                          image: AssetImage(
                                              "images/userpic.png")))),
                            ),
                          ],
                        );
                      } else {
                        return Container(
                            width: 100.0,
                            height: 100.0,
                            decoration: BoxDecoration(
                                shape: BoxShape.circle,
                                image: DecorationImage(
                                    fit: BoxFit.fill,
                                    image:
                                        AssetImage("images/userpic.png"))));
                      }
                    })
                : Container(
                    height: 100.0,
                    width: 100.0,
                    child: CircleAvatar(
                      radius: 40.0,
                      backgroundColor: Colors.white,
                      child: CircleAvatar(
                        child: Align(
                          alignment: Alignment.bottomRight,
                          child: CircleAvatar(
                            backgroundColor: Colors.white,
                            radius: 20.0,
                            child: Icon(
                              Icons.camera_alt,
                              size: 23.0,
                              color: Color(0xFF404040),
                            ),
                          ),
                        ),
                        radius: 38.0,
                        backgroundImage: FileImage(_image!),
                      ),
                    ),
                  )),
        Text("Change your profile picture here")
      ],
    ),
  );
}

CodePudding user response：

You can add a column and display it

CircleAvatar(
  child: Column(
   mainAxisSize: MainAxisSize.min,
   children : [
     Icon(Icons.camera),
     Flexible(
      child: Text("click here to change the profile pic") 
     ),
    ]
   )
 )