The new grid list view idea

[heyarny]

Discussion from #64

Let's see :)

[heyarny]

There are actually many blogs about it already.
Check this one for instance: https://blog.logrocket.com/virtual-scrolling-core-principles-and-basic-implementation-in-react/

[heyarny]

That scroll animation looks kinda weird.
There are 5000 items in the list which are not all attached and scroll-to works just fine?
How do they know the distance to scroll?

I looked up the source code of the list and there are still a lot of things I don't understand.

[heyarny]

Ok, I can confirm it seems to work, except scrollbar is behaving strange.
There's already an issue for that google/flutter.widgets#273

[heyarny]

This guy is having the same problem: google/flutter.widgets#145 (1year+ old)
Seems like flutter is not there yet to have everything in one widget.
I guess ScrollablePositionedList is not their priority as its latest release is still not null-safety.

[shyndman]

That scroll animation looks kinda weird.

It's running in debug mode, which is considerably slower. I've attached a version built in release mode (at the bottom). Does it look better to you?

There are 5000 items in the list which are not all attached and scroll-to works just fine?
How do they know the distance to scroll?

Yup.

Looks like they're winging it, and correcting after the fact. I added a ScrollBar so I could see how it behaves, and its clear that if you jump past a bunch of rows then scroll up, the height of the viewport and scroll position is being recomputed regularly (ie, the scrollbar jumps around, even if you're scrolling up).

I've had an opportunity to read over the code quickly, but I need to sit down with it to get a better idea.

Screen.Recording.2021-08-25.at.10.22.26.AM.mov

[heyarny]

I meant the "fading"-part while scrolling is weird. I guess they're pre-creating the block of rows you're about to scroll to and simply fade into that block. So actually smarter instead of scrolling through all the rows and create unnecessary widgets.

I'll try to find other ways to get to the goal. Maybe with slivers or something else.

[heyarny]

@shyndman look what I've found: https://gist.github.com/aloisdeniel/81d6a5241ca9e2f82f17cf3c001444c5

This sliver grid layout is working great so far as a base layout.
I like it as this seems to be the most state-of-the-art way to create layouts using grid-view and slivers.

The layouting is working fine so far and now I'm trying to solve the following:

• auto extent height to adjust height to widgets content (I have an idea, but not sure yet)
• insert/deletion animations (might be easier, as this solution is based on gridview/sliver standards)
• scroll to/jump to (might be possible, if we know all the positions & sizes of all widgets)

[shahmirzali49]

@heyarny finally did you find a solution or ? :)

[heyarny]

@Shahmirzali-Huseynov nope, I gave up on flutter. Good luck

[sahmirzali]

@Shahmirzali-Huseynov nope, I gave up on flutter. Good luck

Sad (, are you using other cross platform or native?

[heyarny]

Take a look at KMM https://kotlinlang.org/docs/multiplatform-mobile-getting-started.html
I'm still on it, but is seems very promising.