Menu
I would like to create an Image widget that sizes to the height of it's parent, but then overflows the width of the parent based on the aspect ratio of the displayed image. I've tried FittedBox and a combination of LayoutBuilder and SizedOverflowBox, but no luck. So far I've only been able to get the image to size to the parent in both width and height.
Is there a combination of widgets that will give me this behavior?
749
final GlobalKey _childKey = GlobalKey(); _getChildWidth() { final Size size = _childKey. currentContext. size; final width = size. width; return width; } Widget child = Container( key: _keyChild, child: Text("text here"), ); Widget parent = Container( width: _getChildWidth + 10, child: child, );
To get the size/position of a widget on screen, you can use GlobalKey to get its BuildContext to then find the RenderBox of that specific widget, which will contain its global position and rendered size. Just one thing to be careful of: That context may not exist if the widget is not rendered.
I ended finding a very straight forward way to do this using the OverflowBox widget:
new Container(
child: new OverflowBox(
minWidth: 0.0,
minHeight: 0.0,
maxWidth: double.infinity,
child: new Image(
image: new AssetImage('assets/images/bubbles.jpg'),
fit: BoxFit.cover))
),
When provided double.INFINITY for the maxWidth and no value for maxHeight the OverflowBox sized the image to the height of the container and the width required to display the full image based on the given height.
156
Give this a try:
new Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage(
'assets/images/custom_birthday_card.jpg',
),
fit: BoxFit.cover,
),
),
);
If you still have a problem after this, check out my card example on GitHub here.
12
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
