I'm trying to create widget like as follows. It is working fine for 2 digits. ( like shown on the image "20" ) but if the number increases the shown label is not centered. It is moved to right side. like shown on the second image. How do I fix this? I have tried in many ways, the way I tried are failed. please see my tried code below.
Stack(
children: <Widget>[
Container(
width: profileImageSize,
height: profileImageSize,
decoration: new BoxDecoration(
shape: BoxShape.circle,
image: new DecorationImage(
fit: BoxFit.fill,
image: new NetworkImage("$profileImageUrl"),
),
),
),
(this.countFollowers != null)
? Padding(
padding: const EdgeInsets.only(left: 15.0, top: 30.0),
child: SpriiFollowerCountLabel(countFollowers),
)
: Container(),
],
);
Stack(alignment: AlignmentDirectional.center,children: <Widget>[])
Instead of
Padding(
padding: const EdgeInsets.only(left: 15.0, top: 30.0),
child: SpriiFollowerCountLabel(countFollowers),
)
use
Container(
alignment: Alignment.center,
padding: const EdgeInsets.only(top: 30.0),
child: SpriiFollowerCountLabel(countFollowers),
)
but i would recommend to use
Container(
width: profileImageSize,
height: profileImageSize,
decoration: new BoxDecoration(
shape: BoxShape.circle,
image: new DecorationImage(
fit: BoxFit.fill,
image: new NetworkImage("$profileImageUrl"),
),
),
child: Stack(
children: <Widget>[
Container(
alignment: Alignment.bottomCenter,
child: SpriiFollowerCountLabel(countFollowers),
)
],
),
),
I resolve this issue by using the transform property of container and remove the Stack widget and replace it by column
Column(
children: <Widget>[
Container(
width: profileImageSize,
height: profileImageSize,
decoration: new BoxDecoration(
shape: BoxShape.circle,
image: new DecorationImage(
fit: BoxFit.fill,
image: new NetworkImage("$profileImageUrl"),
),
),
),
(this.countFollowers != null)
? Container(
child: SpriiFollowerCountLabel(countFollowers),
transform: Matrix4.translationValues(0.0, -10.0, 0.0),
)
: Container(),
],
);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.