I want to put some text over an image and I thought of using a ClipRRect with a Stack as a child. That way I could stack the images and text on top of each other. When I do this though, the image gets cut off on the right-hand side. Can anyone point out the problem?
Link here as I cannot embed images yet
return ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: Stack(
children:<Widget>[
Image.network(
listItem.imageUrl,
height: 200.0,
//width: 100.0,
fit: BoxFit.cover
),
]
),
);
The reason why the right side of the image is clipped out is that you are placing a rounding the border of the Stack instead of the Image. This is how you can achieve what you've wanted to do:
return Stack(
children:<Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: Image.network(
listItem.imageUrl,
height: 200.0,
fit: BoxFit.cover
),
),
Align(alignment:Alignment.bottomCenter,child:Text("Hello World")),
]
);
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments