[New feature] Allowing the `ListView` slivers to have different extents while still having scrolling performance #131393

xu-baolin · 2023-07-27T08:02:38Z

Currently we only support specifying all slivers to have the same extent.
This patch introduces an itemExtentBuilder property for ListView, allowing the slivers to have different extents while still having scrolling performance, especially when the scroll position changes drastically(such as scrolling by the scrollbar or controller.jumpTo()).

@Piinks Hi, Any thoughts about this? :)

flutter-dashboard · 2023-07-27T08:02:41Z

It looks like this pull request may not have tests. Please make sure to add tests before merging. If you need an exemption to this rule, contact Hixie on the #hackers channel in Chat (don't just cc him here, he won't see it! He's on Discord!).

If you are not sure if you need tests, consider this rule of thumb: the purpose of a test is to make sure someone doesn't accidentally revert the fix. Ask yourself, is there anything in your PR that you feel it is important we not accidentally revert back to how it was before your fix?

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

Piinks

This looks very exciting! Thank you for putting this together!!
I am have been meaning to get to something similar, just have not had the opportunity yet. I thought this type of approach would resolve #52207

Piinks · 2023-07-27T20:31:41Z

packages/flutter/lib/src/rendering/sliver.dart

What do you think of passing an index plus a little bit more information about the viewport?

My original thought for this was to see what folks thought of the TableSpanExtent API in the TableView (flutter/packages#4536) and maybe move that into the framework.
This section of the design document talks about it (links direct to that section): https://docs.google.com/document/d/15ecTZE1g3WeswLGFWrnEgMP6SyL6jDRdxOgPsczOcV0/edit?resourcekey=0-yNd_qFhiPjz6z2TgezWc0A#heading=h.a8uex5ucyiso

It defines multiple ways for developers to set an extent, based on the viewport, or the preceding scroll extent, or as the result of an operation, etc.

I figured if it worked well for folks (we did already test it in a usability study), we could use it here as well, making it a super class like ChildScrollExtent or some such - names are hard. 😆

What do you think of passing an index plus a little bit more information about the viewport?

What do you think of exposing the SliverConstraints directly or just some of the key properity of viewport?

Hmmm, that's a good idea! It won't communicate the information about how much the SliverList has laid out already though, since the SliverConstraints relate to the whole sliver and not its contents. What parts of SliverConstraints would be relevant to the user when building an item of the list? Definitely the viewportExtent I think. Maybe we can wrap those parts up in an object with additional info like how much extent has been laid out.

I have wraped some layout relation properity into SliverLayoutDimensions and exposed it to the callback.

Will finish the test cases ASAP.

Piinks

So excited about this. 😁 Thanks for the update!

Piinks · 2023-08-10T18:10:22Z

packages/flutter/lib/src/rendering/sliver.dart

Suggested change

/// Holds the relation dimensions of the [RenderSliver] during layout.

/// Relates the dimensions of the [RenderSliver] during layout.

///

/// Used by...

Can add a reference to the item extent callback from sliver list / list view?

packages/flutter/lib/src/rendering/sliver.dart

Piinks · 2023-08-10T18:12:41Z

packages/flutter/lib/src/rendering/sliver_fixed_extent_list.dart

Suggested change

ItemExtentGetter? get itemExtentCallback => null;

ItemExtentGetter? get itemExtentBuilder => null;

WDYT of this name?

packages/flutter/lib/src/rendering/sliver_fixed_extent_list.dart

Piinks

I think this is nearly there. Thank you very much for putting this together, and for your patience. I found the issue requesting this and added it to the description.

packages/flutter/lib/src/material/reorderable_list.dart

packages/flutter/lib/src/rendering/sliver.dart

packages/flutter/lib/src/rendering/sliver_fixed_extent_list.dart

Piinks · 2023-08-15T19:31:44Z

packages/flutter/lib/src/widgets/sliver_explicit_extent_list.dart

Could this be nullable? Or maybe we can add an assertion as the body of this getter that says this should not be used?

Yes, I have change it to nullable and add a assertion at the beginning of RenderSliverFixedExtentBoxAdaptor.performLayout()

assert((itemExtent != null && itemExtentBuilder == null) || (itemExtent == null && itemExtentBuilder != null)); assert(itemExtentBuilder != null || (itemExtent!.isFinite && itemExtent! >= 0));

packages/flutter/lib/src/widgets/sliver_explicit_extent_list.dart

Piinks · 2023-08-15T19:33:43Z

packages/flutter/lib/src/widgets/sliver_explicit_extent_list.dart

In general, does this need to be it's own class? Would it be possible to use SliverFixedExtentList for both cases? I am curious for your thinking first, no need to change the code right now. As a developers, I wonder, what is the difference between Fixed and Explicit?

I have considered extending SliverFixedExtentList to support variable extent.
But I'm worried that this will break the developer's understanding of SliverFixedExtentList.
Maybe we need a better name to tell them the difference between the two.
It's really hard to name it, any suggestions? 😄

But I'm worried that this will break the developer's understanding of SliverFixedExtentList.

I agree with you on this. Sorry if my question led to some code changes we should revert now. Let's keep SliverFixedExtent as it is, and integrate itemExtentBuilder into a new sliver like you proposed. :)

It's really hard to name it, any suggestions?

Hmmmm I agree names are hard.
What if...

SliverFixedExtentList, uses itemExtent, one fixed extent for all children

SliverVariedExtentList, uses itemExtentBuilder, children have extents provided by the builder

Then we can have them refer to one another for developers to choose what they would prefer to use.

As I was thinking about it this weekend, I think having separate render objects is a good idea. Keeps the code clearer, easier to follow, and maintain

That's a great name : )

Piinks · 2023-08-15T19:36:15Z

packages/flutter/lib/src/rendering/sliver_fixed_extent_list.dart

What if when null, this builder just returns itemExtent for every index by default? Maybe it could simplify the code below with if (itemExtentBuilder == null)?

I have added some docs for this.

/// The main-axis extent builder of each item. /// /// If this is non-null, the [itemExtent] must be null. /// If this is null, the [itemExtent] must be non-null. ItemExtentBuilder? get itemExtentBuilder => null;

GeylanKalafMohe · 2023-09-03T10:56:01Z

Hello please approve

Piinks

LGTM! I am really excited for folks to have this, thank you so much for your work on this! 🎉

… to have different extents with high layout performance.

oddko · 2023-09-12T07:04:16Z

Thank you so much for your great work !

xu-baolin · 2023-09-12T14:06:16Z

@Piinks Hi, Thank you very much for reviewing. Hope you guys enjoyed your trip to Shanghai last week : ) Oh, by the way, I have recently been trying to introduce a caching mechanism to ListView to reduce unnecessary layout operations to further optimize its scrolling performance. I hope to find a better solution.

…nt extents while still having scrolling performance (flutter/flutter#131393)

Piinks · 2023-09-12T17:21:36Z

Hope you guys enjoyed your trip to Shanghai last week : )

Absolutely! Meeting each other was a highlight of the trip! 🎉

Oh, by the way, I have recently been trying to introduce a caching mechanism to ListView to reduce unnecessary layout operations to further optimize its scrolling performance. I hope to find a better solution.

This is really interesting, I would be happy to hear more if you are interested in pursuing it. I think in some cases caching could work, we could see what it looks like to give developers the option. Not sure. :)

…nt extents while still having scrolling performance (flutter/flutter#131393)

flutter/flutter@219efce...4e7a07a 2023-09-12 [email protected] Remove chip tooltip deprecations (flutter/flutter#134486) 2023-09-12 [email protected] Roll Flutter Engine from 8a8ddaeecf8a to d4698c65aa8d (2 revisions) (flutter/flutter#134553) 2023-09-12 [email protected] Remove deprecated TextSelectionOverlay.fadeDuration (flutter/flutter#134485) 2023-09-12 [email protected] Roll Flutter Engine from 25be03186d82 to 8a8ddaeecf8a (1 revision) (flutter/flutter#134545) 2023-09-12 [email protected] Roll Packages from ef0c65e to e04ba88 (5 revisions) (flutter/flutter#134546) 2023-09-12 [email protected] Revert "Adds a parent scope TraversalEdgeBehavior and fixes modal rouâ�¦ (flutter/flutter#134550) 2023-09-12 [email protected] Marks Windows_android channels_integration_test_win to be unflaky (flutter/flutter#133129) 2023-09-12 [email protected] Roll Flutter Engine from 4091167e402d to 25be03186d82 (1 revision) (flutter/flutter#134536) 2023-09-12 [email protected] Roll Flutter Engine from 54175da7ba90 to 4091167e402d (1 revision) (flutter/flutter#134532) 2023-09-12 [email protected] Roll Flutter Engine from 85f3f02e5c37 to 54175da7ba90 (2 revisions) (flutter/flutter#134531) 2023-09-12 [email protected] Roll Flutter Engine from 1369ab35aaa7 to 85f3f02e5c37 (1 revision) (flutter/flutter#134519) 2023-09-12 [email protected] Roll Flutter Engine from 2f1efe5967f3 to 1369ab35aaa7 (1 revision) (flutter/flutter#134512) 2023-09-12 [email protected] Roll Flutter Engine from 4d8265cbc133 to 2f1efe5967f3 (3 revisions) (flutter/flutter#134511) 2023-09-12 [email protected] Roll Flutter Engine from ee7215553deb to 4d8265cbc133 (1 revision) (flutter/flutter#134506) 2023-09-12 [email protected] Roll Flutter Engine from 6ddee4423d2c to ee7215553deb (2 revisions) (flutter/flutter#134505) 2023-09-12 [email protected] Roll Flutter Engine from a98348946d61 to 6ddee4423d2c (1 revision) (flutter/flutter#134490) 2023-09-12 [email protected] [New feature] Allowing the `ListView` slivers to have different extents while still having scrolling performance (flutter/flutter#131393) 2023-09-12 [email protected] Roll Flutter Engine from 8389ad914b21 to a98348946d61 (4 revisions) (flutter/flutter#134487) 2023-09-12 [email protected] ScaleGestureRecognizer: make pointerCount public (flutter/flutter#127310) 2023-09-11 [email protected] Fix DataTable example not being scrollable (flutter/flutter#131556) 2023-09-11 [email protected] Roll Flutter Engine from 06696e768c1b to 8389ad914b21 (2 revisions) (flutter/flutter#134469) 2023-09-11 [email protected] [flutter_tools] disallow -O0 for flutter build web (flutter/flutter#134185) 2023-09-11 [email protected] Cover focus tests with leak tracking (flutter/flutter#134457) 2023-09-11 [email protected] Roll Flutter Engine from 0774ddcda9b0 to 06696e768c1b (4 revisions) (flutter/flutter#134462) 2023-09-11 [email protected] Fix memory leak in RenderAnimatedSize (flutter/flutter#133653) 2023-09-11 [email protected] Roll Flutter Engine from e42fd367adcb to 0774ddcda9b0 (1 revision) (flutter/flutter#134447) 2023-09-11 [email protected] Roll Flutter Engine from d593002b7159 to e42fd367adcb (1 revision) (flutter/flutter#134444) 2023-09-11 [email protected] Roll Packages from aaae5ef to ef0c65e (6 revisions) (flutter/flutter#134445) 2023-09-11 [email protected] Roll Flutter Engine from 2b5961cbc40d to d593002b7159 (3 revisions) (flutter/flutter#134439) 2023-09-11 [email protected] Mark leak: instances of OpacityLayer, created by _RenderChip, should be disposed. (flutter/flutter#134395) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages Please CC [email protected],[email protected],[email protected] on the revert to ensure that a human is aware of the problem. To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://bugs.chromium.org/p/skia/issues/entry?template=Autoroller+Bug Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md

…nt extents while still having scrolling performance (flutter/flutter#131393)

Updates the long list cookbook to add `ListView.extentItemBuilder`, which was added recently for lists with extends of different sizes: flutter/flutter#131393 ## Presubmit checklist - [x] This PR doesn’t contain automatically generated corrections (Grammarly or similar). - [x] This PR follows the [Google Developer Documentation Style Guidelines](https://developers.google.com/style) — for example, it doesn’t use _i.e._ or _e.g._, and it avoids _I_ and _we_ (first person). - [x] This PR uses [semantic line breaks](https://github.com/dart-lang/site-shared/blob/main/doc/writing-for-dart-and-flutter-websites.md#semantic-line-breaks) of 80 characters or fewer.

github-actions bot added framework flutter/packages/flutter repository. See also f: labels. f: scrolling Viewports, list views, slivers, etc. labels Jul 27, 2023

xu-baolin force-pushed the xbl230727 branch from 5229916 to cc45d45 Compare July 27, 2023 08:11

Piinks reviewed Jul 27, 2023

View reviewed changes

xu-baolin force-pushed the xbl230727 branch from 1a42ab4 to 34084a1 Compare August 4, 2023 03:20

github-actions bot added the f: material design flutter/packages/flutter/material repository. label Aug 4, 2023

xu-baolin force-pushed the xbl230727 branch 2 times, most recently from 2c7c823 to 696873e Compare August 8, 2023 10:18

xu-baolin requested a review from Piinks August 8, 2023 11:21

Piinks reviewed Aug 10, 2023

View reviewed changes

xu-baolin force-pushed the xbl230727 branch 3 times, most recently from 3431ac5 to 6b46dc6 Compare August 11, 2023 05:37

Piinks reviewed Aug 15, 2023

View reviewed changes

xu-baolin force-pushed the xbl230727 branch from 6b46dc6 to 286213b Compare August 16, 2023 10:15

Piinks mentioned this pull request Aug 16, 2023

Scrollbar stutter on basic ListView!! #132216

Closed

2 tasks

xu-baolin force-pushed the xbl230727 branch 2 times, most recently from 09c96ad to 930613a Compare August 22, 2023 10:34

xu-baolin requested a review from Piinks August 30, 2023 10:15

Piinks approved these changes Sep 12, 2023

View reviewed changes

xu-baolin added 8 commits September 11, 2023 19:28

Adding the itemExtentCallback property to the ListView allows slivers…

79c116e

… to have different extents with high layout performance.

++

3a58513

review feedback

4924646

++

1e8febd

add tests

6ead2b2

++

864ef30

++

2a41149

++

3f9b6eb

xu-baolin added 2 commits September 11, 2023 19:28

++

787d591

++

85165c5

Piinks force-pushed the xbl230727 branch from 5799970 to 85165c5 Compare September 12, 2023 00:28

Piinks added the autosubmit Merge PR when tree becomes green via auto submit App label Sep 12, 2023

auto-submit bot merged commit a9fac73 into flutter:master Sep 12, 2023

engine-flutter-autoroll mentioned this pull request Sep 12, 2023

Roll Flutter from 219efce7f16d to 127c76b91bef (22 revisions) flutter/packages#4905

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 12, 2023

a9fac73 [New feature] Allowing the ListView slivers to have differe…

eef4d96

…nt extents while still having scrolling performance (flutter/flutter#131393)

engine-flutter-autoroll mentioned this pull request Sep 12, 2023

Roll Flutter from 219efce7f16d to bdd96032a053 (24 revisions) flutter/packages#4906

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 12, 2023

a9fac73 [New feature] Allowing the ListView slivers to have differe…

c18fe67

…nt extents while still having scrolling performance (flutter/flutter#131393)

engine-flutter-autoroll mentioned this pull request Sep 12, 2023

Roll Flutter from 219efce7f16d to 5900c4baa751 (25 revisions) flutter/packages#4907

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 12, 2023

a9fac73 [New feature] Allowing the ListView slivers to have differe…

32eb86c

…nt extents while still having scrolling performance (flutter/flutter#131393)

engine-flutter-autoroll mentioned this pull request Sep 12, 2023

Roll Flutter from 219efce7f16d to f9aef4f21e31 (26 revisions) flutter/packages#4908

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 12, 2023

a9fac73 [New feature] Allowing the ListView slivers to have differe…

bc92fc2

…nt extents while still having scrolling performance (flutter/flutter#131393)

Piinks added the c: new feature Nothing broken; request for a new capability label Sep 12, 2023

engine-flutter-autoroll mentioned this pull request Sep 12, 2023

Roll Flutter from 219efce7f16d to 90ae98f57642 (28 revisions) flutter/packages#4909

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 12, 2023

a9fac73 [New feature] Allowing the ListView slivers to have differe…

4f0e194

…nt extents while still having scrolling performance (flutter/flutter#131393)

engine-flutter-autoroll mentioned this pull request Sep 12, 2023

Roll Flutter from 219efce7f16d to 4e7a07af882c (30 revisions) flutter/packages#4910

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Sep 12, 2023

a9fac73 [New feature] Allowing the ListView slivers to have differe…

3eab862

…nt extents while still having scrolling performance (flutter/flutter#131393)

HansMuller mentioned this pull request Sep 15, 2023

Flutter Framework Team: Notable Commits #121415

Closed

whesse mentioned this pull request Sep 19, 2023

Current results ui has slow/broken scrolling on long test lists dart-lang/dart_ci#158

Open

Piinks mentioned this pull request Sep 29, 2023

ListView: Poor performance with many variable-extent items + jumpTo (scroll bar, trackpad, mouse wheels) #52207

Open

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 15, 2023

a9fac73 [New feature] Allowing the ListView slivers to have differe…

29c4b35

…nt extents while still having scrolling performance (flutter/flutter#131393)

Reprevise mentioned this pull request Nov 20, 2023

Add itemExtentBuilder to ListView.separated #138758

Open

2 tasks

loic-sharma mentioned this pull request May 16, 2024

Update long lists cookbook flutter/website#10616

Merged

3 tasks

jacksonrl mentioned this pull request Nov 5, 2025

Add SliverIndexedVariedExtentList to support jumpToIndex #178021

Closed

9 tasks

-/// Holds the relation dimensions of the [RenderSliver] during layout.
+/// Relates the dimensions of the [RenderSliver] during layout.
+///
+/// Used by...

	ItemExtentGetter? get itemExtentCallback => null;
	ItemExtentGetter? get itemExtentBuilder => null;

[New feature] Allowing the ListView slivers to have different extents while still having scrolling performance #131393

[New feature] Allowing the ListView slivers to have different extents while still having scrolling performance #131393

Uh oh!

Conversation

xu-baolin commented Jul 27, 2023 • edited by Piinks Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

flutter-dashboard bot commented Jul 27, 2023

Uh oh!

Piinks left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Piinks left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Piinks left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

xu-baolin Aug 16, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

GeylanKalafMohe commented Sep 3, 2023

Uh oh!

Piinks left a comment

Choose a reason for hiding this comment

Uh oh!

oddko commented Sep 12, 2023

Uh oh!

xu-baolin commented Sep 12, 2023 via email • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Piinks commented Sep 12, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

[New feature] Allowing the `ListView` slivers to have different extents while still having scrolling performance #131393

[New feature] Allowing the `ListView` slivers to have different extents while still having scrolling performance #131393

xu-baolin commented Jul 27, 2023 •

edited by Piinks

Loading

xu-baolin Aug 16, 2023 •

edited

Loading

xu-baolin commented Sep 12, 2023 via email •

edited

Loading