flutter - Container with bottom text field
1,281
Solution 1
If you are trying to Implementing like this:
then you can use Column
or Stack
widget.
I used Stack with Align widget.
Code:
Container(
height: 80.0,
width: 80.0,
child: Stack(
children: <Widget>[
Container(
height: 60.0,
width: 60.0,
margin: EdgeInsets.all(6.0),
decoration: BoxDecoration(
// shape: BoxShape.circle,
borderRadius: BorderRadius.circular(100.0),
boxShadow: [
new BoxShadow(
color: Color.fromARGB(100, 20, 0, 0),
blurRadius: 5.0,
offset: Offset(5.0, 5.0))
],
border: Border.all(
width: 2.0,
style: BorderStyle.solid,
color: Colors.purple),
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage("https://image.shutterstock.com/image-photo/cute-baby-girl-sitting-on-260nw-689375770.jpg"))),
// child:
),
Align(
alignment: Alignment.bottomCenter,
child: new Text("name", style: TextStyle(fontSize: 20.0),),
)
],
),
)
Solution 2
You can try something like this following:
Container(
child: Column(
children: <Widget>[
Container(
height: 60.0,
width: 60.0,
alignment: Alignment.bottomCenter,
margin: EdgeInsets.all(6.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100.0),
boxShadow: [
new BoxShadow(
color: Color.fromARGB(100, 20, 0, 0),
blurRadius: 5.0,
offset: Offset(5.0, 5.0))
],
border: Border.all(
width: 2.0,
style: BorderStyle.solid,
color: Colors.purple),
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
"https://source.unsplash.com/random"))),
),
Text(
"text....",
style: TextStyle(fontSize: 16.0),
)
],
),
)
Author by
jancooth
Updated on December 15, 2022Comments
-
jancooth over 1 year
I have circle avatars. I want to add each
circle's avatar
name at the bottom of theavatar
. But I can not do this. when I run the below code, thetext
appears on theavatar
.My code
child: Container( height: 60.0, width: 60.0, margin: EdgeInsets.all(6.0), decoration: BoxDecoration( borderRadius: BorderRadius.circular(100.0), boxShadow: [ new BoxShadow( color: Color.fromARGB(100, 20, 0, 0), blurRadius: 5.0, offset: Offset(5.0, 5.0)) ], border: Border.all( width: 2.0, style: BorderStyle.solid, color: Colors.purple), image: DecorationImage( fit: BoxFit.cover, image: NetworkImage(userData[x]["image"]))), child: new Text(userData[x]["name"], style: TextStyle(fontSize: 20.0),), ) ));
-
Jiten Basnet over 4 yearsJust give top padding around the Text widget.
-
jancooth over 4 years@JitenBasnet it doesnt work properly. same.
-
Blasanka over 4 years@jancooth I updated the answer please check
-
-
Manpreet Singh Pandher over 4 yearswhere would you like to display the text ,on the bottom of the image or below the image?
-
jancooth over 4 yearsbottom of the image
-
Manpreet Singh Pandher over 4 yearsbecause of the over text size the text can't placed at the bottom try to decline the the text size or increase the size of container
-
Shruti Ramnandan Sharma over 4 years@jancooth pleasure's all mine :)