Short Question
Is it a bad idea to have gridview builder find (and render) an image file every time it needs to build? Any alternative approach?
Long Question
I'm developing a flutter/dart media gallery grid.
I'm using the gridview builder since there could be any arbitrary amount of items I need to display, so need to consider perormance.
All I'm doing is simply pulling a list of image meta data (very light records) into memory (dataMedia), and when gridview builder needs to render one, it'll take the ID from that dataMedia item and (within the components in my media list) will pull that file in.
It's laggy/choppy/jittery/however you want to describe it. I assume it's doing a bit of work in finding the file and then rendering it.
What I've Tried
I've tried really dropping the quality of my images to the extreme just for testing. I can see the quality of the images is really, really poor so that rules out any issues rendering hi-res.
I've also tried pulling all of the images into memory so that it can pluck what it needs from a local collection rather than go to the disk, but I get OutOfMemoryException (it's not feasible to pull all images into memory).
I've also tried this on other devices, but the device it's happening on (the mobile phone I'm using for dev) is a decent spec S20 ultra. So I don't believe it's struggling because of a sub-par phone spec.
Media List
GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
crossAxisSpacing: 2,
mainAxisSpacing: 2,
childAspectRatio: 1,
),
itemCount: dataMedia.length,
itemBuilder: (context, dataMediaIndex) {
final dataMediaItem = dataMedia[dataMediaIndex];
return InkWell(
child: MediaitemWidget(
id: dataMediaItem.id
),
);
},
)
Media Item
return Stack(
children: [
Image.file(File('/myAppPath/${widget.id}.jpg')),
....
