[Flutter] Optimizing Image Loading on flutter for Simultaneous Rendering

I want to load and render all images on the Instagram category screen at the same time, rather than loading them separately one by one. How can I achieve this?this is instagram loading image and render at same time like this and this not like thisthis is my output

I have a GET API that fetches network images, which are displayed using a ListView.builder with caching. Currently, the images load one by one or random, but I want to load all the images at once and render them at same time like instagram search feed screen. Additionally, I want to show a CircularProgressIndicator until all the images have finished loading. How can I achieve this?

SizedBox(
width: 14.6.w,
height: 14.6.w,
child: CachedNetworkImage(
imageUrl: chat.image, // Handle URL here
imageBuilder: (context, imageProvider) =>
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: imageProvider,
fit: BoxFit.fill,
),
),
),
placeholder: (context, url) => Skeletonizer(
ignoreContainers: true,
enabled: true,
child: Container(
padding: EdgeInsets.only(bottom: 1.h),
width: 14.6.w,
height: 14.6.w,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(CommonFunctions
.dummyImageUrl))),
),
),
errorWidget: (context, url, error) =>
const Icon(Icons.error),
),
),

Continue reading...