Search code examples
flutterstackcontainerswidthflutter-layout

Fill all available horizontal space in a stack


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

enter image description here


Solution

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