My Flutter app contains a ListView with lots of entries (currently >700) from an online API which I cannot change. I know the total number of items beforehand, but I cannot request all items in one go or use pagination because of sorting criteria in the app which the API isn't aware of. So I want to update each item in the ListView when its corresponding network request is finished. The data for each item is relatively small in size but large enough that it warrants downloading only the items which are on-screen right now (containing JSON data and images, around 500-800 kilobytes on average). Items that are still loading should show a progress indicator until the request is finished.
I'm confused about how to approach this problem. I was thinking about:
- having one BLoC which manages all data for the whole ListView and which always sends the whole array of items when a new item finished its request (i.e. the BLoC always sends a 700-element array to the UI over the stream and fills it up every time a request finished)
- letting every single ListView item have its own BLoC (or at least give it access to the same BLoC, which creates a separate short-lived stream for each item)
- optimize 1 by only sending the newly finished items to the UI, which has its own internal list and updates it accordingly. However, then I would have to manage the data in the BLoC and the UI twice and separately
Are any of these approaches best practices? Or is there another one I didn't think of? Does it even matter, or am I trying to optimize too much and Flutter is actually optimized enough to even handle case #1 well?
