Fill all available horizontal space in a stack

Question

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"),
            ],
          ),
        ),
      ),
    ],
  )
);

score 8 · Accepted Answer · answered Jan 30 '19 at 04:28

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"),
            ],
          ),
        ),
      ),
    ],
  )
);

score 1 · Answer 2 · answered Jan 30 '19 at 02:05

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.

score 0 · Answer 3 · answered Mar 13 '23 at 10:44

I've actually stumbled across an answer using a stack, however, if anyone knows a way with the Columns/Rows I'd be interested to know...

    return Row(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Column(
          children: [
            Stack(
              children: [
                // title
                Text(
                  title,
                  style: baseStyle,
                ),

                // underline
                Positioned.fill(
                  top: null,
                  child: Container(
                    height: 4,
                    decoration: BoxDecoration(
                      color: Colors.yellow,
                      borderRadius: BorderRadius.circular(2),
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ],
    );
  }

Fill all available horizontal space in a stack

3 Answers3