CODEWITHSUNDEEP
androidflutterflutter-layout
VCODE
VCODE

Reputation: 700

Image gets cut when wrapped in a `Stack`

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,
          ),
        ),
      ),
    );
  }

enter image description here

  1. 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'),
              )
            ],
          ),
        ),
      ),
    );
  }

enter image description here

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

Upvotes: 1

Views: 916

Answers (2)

Md. Yeasin Sheikh
Md. Yeasin Sheikh

Reputation: 63749

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

Upvotes: 0

VCODE
VCODE

Reputation: 700

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.

Upvotes: 1

Related Questions