[Optimize scrolling] Scrolling of grid shows black/empty items

[yanivshaked]

Problem description:
When scrolling the grid, it happens very often that all the grid items become black, and then they are repopulated. It's a very bad experience for the user. It happens even when using very low resolution for the grid items.

Optimization suggestion:
Consider replacing the GridView.builder with SliverGrid with SliverChildBuilderDelegate that has findChildIndexCallback.
It is most likely that it will improve performance of scrolling.

If that direction sounds ok to you, I will be happy to try it and submit a PR.
If you have other thought, please share.

Thanks,
Yaniv

[yanivshaked]

Just to clarify - the issue occurs also when scrolling very slowly

[AlexV525]

Not sure the optimization you are indicating, could you share some videos about it?

[AlexV525]

Oh I see, that's the paging issue.

[AlexV525]

If it does help, I'd happy to see you fix this.

[yanivshaked]

Following branch has the relevant changes, but issue is not solved:
https://github.com/12Tech12/flutter_wechat_assets_picker/tree/20210510_Fix_Grid_Scrolling

1. There are multiple calls to provider.loadMoreAssets for the same page. I have fixed it using a critical section flag (dart is single threaded).
2. Instead of replacing the entire _currentAssets list, I'm adding more assets to that list.

I have replaced GridView.builder with SliverGrid that has findChildIndexCallback - and that routine is called everytime the list is enlarged, but the paging issue is still there, entire grid is refreshed.

I'm still working on it, but please share your thoughts :-)

[AlexV525]

• Use the count of current assets instead of the list as a selector might help.
• Increase the default value for each page (currently 80, to 120 maybe) to prevent loading more page at the very start.

[AlexV525]

I do found a new way to solve this, will file a PR soon.