Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Consider refactoring component lists into SliverLists #1694

Closed
Piinks opened this issue Mar 9, 2023 · 1 comment · Fixed by #1802
Closed

Consider refactoring component lists into SliverLists #1694

Piinks opened this issue Mar 9, 2023 · 1 comment · Fixed by #1802
Assignees

Comments

@Piinks
Copy link
Contributor

Piinks commented Mar 9, 2023

From investigating flutter/flutter#121786

Each section of the component list is itself a long list that would benefit from being split into SliverLists. These sections are all very large and there are only a few of them. This has two effects:

  • Way more content is being built than necessary since each large component section is only one child of the component ListView
  • The scrollbar jumps around as the scroll metrics report very different metrics as these large chunks are being built on demand.

In the 2 list view, there are only 3 children in the lists on either side. Instead, each side should be a CustomScrollView, and each component section should be a SliverList.

Screenshot 2023-03-08 at 6 22 48 PM

@HansMuller
Copy link

HansMuller commented May 10, 2023

Just FTR, the scrollbar thumb jumps around because the default implementation of SliverChildDelegate.estimateMaxScrollOffset doesn't produce a good or consistent estimate when the list item heights vary significantly.

Here's a relatively simple example that demonstrates the problem:
https://dartpad.dev/?id=0236cfdc97d7a7165b4da1f71267cf10&channel=master

In cases like this, where the list's children and the children themselves don't change, it's safe to cache the height of each child when it's rendered.

Here's a version of the same example that caches item heights and uses the sum of the cached values as the value of SliverChildDelegate.estimateMaxScrollOffset.
https://dartpad.dev/?id=baa01604cf1bf955f225779252a13ab5&channel=master

The new version is more complex and the scrollbar thumb shrinks as more of the list is exposed. Once you've scrolled to the end of the list the height of the thumb stops changing because all of the items' heights have been cached.

#1802 applies both the height caching change suggested here the use of embedded SliverLists suggested in the description to the M3 demo.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants