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

Answer 1

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
• SizedBox.expand

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.