placeholders take up more height than they should

Question

What can I do to make placeholders the same size as the image? Without placeholders Card is the same size as the image, so I think that the problem is with the placeholder

Screenshot

Widget build(BuildContext context) {
return Scaffold(
  body: Column(
    children: [
      Expanded(
        child: MasonryGridView.count(
          controller: _scrollController,
          crossAxisCount: columns,
          itemCount: images.length,
          itemBuilder: (context, index) {
            final image = images[index];

            return Card(
                clipBehavior: Clip.antiAlias,
                child: FadeInImage.memoryNetwork(
                    placeholder: kTransparentImage,
                    image: image.previewUrl,
                    fit: BoxFit.fitWidth,
                    width: image.previewWidth.toDouble(),
                    height: image.previewHeight.toDouble()));
          },
        ),
      ),
      _buildLoadingIndicator(),
    ],
  ),
);
}

the placeholder should be the same size as the image

What exactly is the placeholder here? I can't see `Placeholder` widget in the code you shared. Or where is the code for what should be your placeholder? And the image you shared doesn't seem to explain the height problem you are talking of — Obum, Aug 02 '23 at 08:07
Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. — Community, Aug 03 '23 at 08:38

score 0 · Answer 1 · answered Aug 02 '23 at 08:57

the placeholder should be the same size as the image

Your images have different size and they are matched against fit: BoxFit.fitWidth,

Depending on what you are trying to achive wrap your placeholder with:

FittedBox allows to align image inside of its container to match the width when you set the fit: BoxFit.fitWidth. The height of the image and placeholder may vary.

SizedBox.expand will take up the space of a parent - in your case whole card.

placeholders take up more height than they should

1 Answers1