Image gets cut when wrapped in a `Stack`

Question

I am designing a widget that displays an image and a text on top of it.

In order to put the text widget on top of the image, I am using a Stack , however, as soon as I wrap the widgets with the stack, the bottom part of the image gets cut.

1. Without Stack (this is good):

Widget body() {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(8),
        child: Container(
          width: 160,
          height: 200,
          child: Image.network(
            'https://picsum.photos/250?image=9',
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }

2. With Stack (not good as the bottom of the image gets cut):

 Widget body() {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(8),
        child: Container(
          width: 160,
          height: 200,
          child: Stack(
            children: [
              Image.network(
                'https://picsum.photos/250?image=9',
                fit: BoxFit.cover,
              ),
              Align(
                alignment: Alignment.bottomLeft,
                child: Text('Label'),
              )
            ],
          ),
        ),
      ),
    );
  }

Any ideas why this is happening and how to address it?

Answer 1

OK, I found out that it works if the image is wrapped in a Container and has a height provided, like this:

child: Stack(
    children: [
        Container(
        width: 160,
        height: 200,
        child: Image.network(
            'https://picsum.photos/250?image=9',
            fit: BoxFit.cover,
          ),
        ),
        Align(
        alignment: Alignment.bottomLeft,
        child: Text('Label'),
        )
    ],
),
         

Not sure why this is the case, but I guess it has something to do with the inability of the image to properly compute it's width/height when not specified in the parent widget.

Answer 2

use fit: StackFit.expand, let me know if it works for you .

  Widget body() {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(8),
        child: Container(
          width: 160,
          height: 200,
          child: Stack(
            fit: StackFit.expand,
            children: [
              Image.network(
                'https://picsum.photos/250?image=9',
                fit: BoxFit.cover,
              ),
              Align(
                alignment: Alignment(-.8, .75),
                child: Text(
                  'Label',
                ),
              )
            ],
          ),
        ),
      ),
    );
  }