Scrollbar stutter on basic ListView!!

[GeylanKalafMohe]

Is there an existing issue for this?

• I have searched the existing issues
• I have read the guide to filing a bug

Steps to reproduce

1. UseScrollbar view with a ListView widget containing 200 basic items
2. Scroll fast or little bit slower and you will see the stutter of the scrollbar on the right side.

Expected results

No Stutter should happen

Actual results

Scrollbar is hardly stuttering. The more widgets each item has it gets worse.

Code sample

Code sample

final controller = ScrollController();

Scaffold(
      appBar: AppBar(title: const Text('Scrollbar stutter issue!!')),
      body: Scrollbar(
        controller: controller,
        child: ListView.separated(
          controller: controller,
          separatorBuilder: (BuildContext context, int index) =>
              const Divider(),
          itemCount: 200,
          itemBuilder: (BuildContext context, int index) {
            return Column(
              children: [
                const SizedBox(
                  height: 10,
                ),
                Text(
                  'See Scrollbar, index: $index',
                ),
                const SizedBox(
                  height: 10,
                ),
              ],
            );
          },
        ),
      ),
    );

Screenshots or Video

Screenshots / Video demonstration

RPReplay_Final1691584143.2.mov

Logs

No response

Flutter Doctor output

Doctor output

Flutter 3.10.6 • channel stable • https://github.com/flutter/flutter.git
Framework • revision f468f3366c (4 weeks ago) • 2023-07-12 15:19:05 -0700
Engine • revision cdbeda788a
Tools • Dart 3.0.6 • DevTools 2.23.1

Running flutter doctor...
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.10.6, on macOS 13.3.1 22E772610a darwin-x64, locale en-SA)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.3)
[✓] VS Code (version 1.80.1)
[✓] Connected device (4 available)
[✓] Network resources

• No issues found!

[moffatman]

The default ScrollView list delegate is not ideal in my opinion, especially when itemCount is known. I have a more detailed implementation here, it uses too much additional information to adapt directly, though.

https://github.com/moffatman/chan/blob/ef1b69256e1caf37570c03f3fcc3425c0adc50c7/lib/widgets/refreshable_list.dart#L75

[dam-ease]

Hi @GeylanKalafMohe. Thanks for filing this issue. I can almost not reproduce testing with iPhone 14 (iOS 16.4) both on the master and stable channels but can still see a little pause

Simulator.Screen.Recording.-.iPhone.14.-.2023-08-09.at.14.16.00.mp4

Thanks for your input @moffatman. Awaiting your response per #132216 (comment)

[GeylanKalafMohe]

Hi @GeylanKalafMohe. Thanks for filing this issue. I can almost not reproduce testing with iPhone 14 (iOS 16.4) both on the master and stable channels but can still see a little pause

Simulator.Screen.Recording.-.iPhone.14.-.2023-08-09.at.14.16.00.mp4

Thanks for your input @moffatman. Awaiting your response per #132216 (comment)

Thank you for testing but actually the issue happens on your device as well. Kindly check the video, you see the scrollbar stuttering. Because you scroll fast it may not be noticable. Try to slow a little bit slower and you will notice it like my attached video. The more complex each list item is you will not the stutter even more!!

[GeylanKalafMohe]

The default ScrollView list delegate is not ideal in my opinion, especially when itemCount is known. I have a more detailed implementation here, it uses too much additional information to adapt directly, though.

https://github.com/moffatman/chan/blob/ef1b69256e1caf37570c03f3fcc3425c0adc50c7/lib/widgets/refreshable_list.dart#L75

The fixed item count was just a simplified example as it also happens when using the list length.

[dam-ease]

Thanks for your response @GeylanKalafMohe. I am able to reproduce this on the latest master and stable channels quite evidently on iOS. Although the stutter on Android as well doesn't seem too noticeable. Can you please test on Android to see if it reproduces?

untitled.webm

[GeylanKalafMohe]

Thanks for your response @GeylanKalafMohe. I am able to reproduce this on the latest master and stable channels quite evidently on iOS. Although the stutter on Android as well doesn't seem too noticeable. Can you please test on Android to see if it reproduces?

untitled.webm

The same issue happens on Android as well. As I said the more complex each list item is, the more noticeable the stutter will be, even with less list item count.

[moffatman]

It doesn't have to do with list item complexity, but rather the difference in height

[GeylanKalafMohe]

It doesn't have to do with list item complexity, but rather the difference in height

Could be most probably. The question is why does it happen 🤔 It should be fixed soon by the Flutter team as it impacts all Flutter apps.

[moffatman]

It's because the component which estimates the height of the scrolling widget, doesn't have all the information about the list that you give to ListView. And doesn't do any caching, which means as items appear and disappear off the top of the screen, the estimate changes rapidly.

[GeylanKalafMohe]

@dam-ease @moffatman Yeah but when there is no other solution the flutter team should add slight animation to get rid of this or another workaround.

Also this issue does not happen when developing natively. Kindly tackle this issue.

[Piinks]

It's because the component which estimates the height of the scrolling widget, doesn't have all the information about the list that you give to ListView.

This is correct. Setting an itemExtent or prototypeItem would resolve this. There is also a dynamic extent proposal in #131393

This issue is a duplicate of #25652, please follow there for updates. Thank you!

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.