Fill all available horizontal space in a stack
2,587
Solution 1
Set the left
and right
values to 0
so that the container will behave so.
Card(
clipBehavior: Clip.antiAlias,
child: Stack(
children: <Widget>[
Positioned.fill(child: Image.network(
image_url,
fit: BoxFit.fitWidth,
),
),
Positioned(
bottom: 0,
left: 0,
right: 0,
child: Container(
padding: new EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 5.0),
decoration: new BoxDecoration(color: Colors.black12),
child: Row(
children: <Widget>[
Text("test1"),
Text("test2"),
Text("test3"),
],
),
),
),
],
)
);
Solution 2
Wrap all the childrens with the Expanded
widget.
Row(
children: <Widget>[
Expanded(
child: Text("test1")
),
Expanded(
child: Text("test2")
),
Expanded(
child: Text("test3")
),
],
),
From the Expanded Widget Documentation:
Using an Expanded widget makes a child of a Row, Column, or Flex expand to fill the available space in the main axis (e.g., horizontally for a Row or vertically for a Column). If multiple children are expanded, the available space is divided among them according to the flex factor.
Author by
woshitom
Updated on December 04, 2022Comments
-
woshitom over 1 year
Inside a card I have a stack with 1) an image and 2) a text inside a container. How can I make the container width to fill the card width?
Card( clipBehavior: Clip.antiAlias, child: Stack( children: <Widget>[ Positioned.fill(child: Image.network( image_url, fit: BoxFit.fitWidth, ), ), Positioned( bottom: 0, child: Container( padding: new EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 5.0), decoration: new BoxDecoration(color: Colors.black12), child: Row( children: <Widget>[ Text("test1"), Text("test2"), Text("test3"), ], ), ), ), ], ) );