Reputation: 115
I'm facing an issue with image loading performance in my Flutter app using a GridView.builder and CachedNetworkImage. Even though im using CachedNetworkImage, I am still experiencing noticeable lag when scrolling back up in the grid, as the widgets are rebuilt and images need to be loaded agian because the children were discarded for being off screen. The average size of each image file is 100 KB.
I'm aiming for a professional-grade photo gallery experience that can fetch the image from my database, cache that image but also not discard the children in the gridview since the user should be able to scroll through their images without a noticeable lag (due to the app rebuilding the child).
class ImageGridView extends StatelessWidget {
const ImageGridView({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Image Grid View"),
),
body: GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 4.0,
mainAxisSpacing: 4.0,
),
itemCount: images.length,
itemBuilder: (context, index) {
return CachedNetworkImage(
imageUrl: images[index],
placeholder: (context, url) => const Center(
child: CircularProgressIndicator(),
),
errorWidget: (context, url, error) => const Icon(Icons.error),
);
},
),
);
}
}
So basically i like the gridview.builder performance but don't like that it discards its children. And i aslo don't want to use lazy loading because if the user navigates out of their gallery and back to it, the lazy loading would be reset forcing the user to initiate its pagination. There's definitely a better solution.
Upvotes: 0
Views: 48