how Insert the text in widget Flutter? - flutter

Question

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

Answer 1

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")
],
),
);
}

Answer 2

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