Flutter: Images not filling the entire Card widget

Question

I'm currently working on a Flutter project where I load images from a network into a Card widget. However, I'm facing an issue where the images are not filling the entire Card, leaving a significant amount of white space on the sides. This happens even when I set the fit property to BoxFit.cover or BoxFit.contain.

Here's a snippet of my code:

 return Card(
  elevation: 5,
  clipBehavior: Clip.antiAlias,
  child: Stack(
    children: [
      Center(
        child: Image.network(
          _imageUrls[index - 1]['url'] ?? '',
          fit: BoxFit.cover,
          loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent? loadingProgress) {
            if (loadingProgress == null) return child;
            return Center(
              child: CircularProgressIndicator(
                value: loadingProgress.expectedTotalBytes != null
                  ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes!
                  : null,
              ),
            );
          },
        ),
      ),
      Positioned(
        right: 5.0,
        top: 5.0,
        child: Icon(Icons.more_horiz, color: Colors.black, size: 30),
      ),
    ],
  ),
);

You may remove the Center widget that wraps Image.network() widget. — Sowat Kheang, May 23 '23 at 02:36

score 0 · Answer 1 · answered May 20 '23 at 14:32

0

Use fit property of Stack widget

Stack(
  fit: StackFit.expand
  children: []
)

answered May 20 '23 at 14:32

Salman Ahmed

110
1
4

This causes an overflow on the entire screen – cipano May 21 '23 at 11:53
Wrap the card widget in sizedbox ad give height to it. – Salman Ahmed May 21 '23 at 12:01

Flutter: Images not filling the entire Card widget

1 Answers1