[Flutter] Widget with image in masonary grid causes resize after loading image

I'm using the Masonry grid from the flutter_staggered_grid_view package along with cached_network_image to display images fetched from an API. When the grid is initially displayed, the images are still being loaded from the network, and regardless of how fast the images load (even if they are cached), the widget appears to resize itself as each image is fetched and rendered.

Is there a way to prevent the widget from resizing itself during the image loading process or any good idea how to make that transition smooth?

I tried to mask the resizing issue by adding animations, which helped a bit, but it still bothers me. I also considered assigning fixed sizes to the widget, but that somewhat defeats the purpose of using the Masonry grid.

Example of widget:

CupertinoButton(
padding: EdgeInsets.zero,
onPressed: () {},
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
CachedNetworkImage(
imageUrl: 'url',
),
const Padding(
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 8),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'test',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w700,
),
),
SizedBox(height: 5),
Padding(
padding: EdgeInsets.only(top: 10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'some text',
),
Text(
'some text',
),
],
),
),
SizedBox(height: 5),
],
),
),
],
),
);

Continue reading...