Very slow scrolling performance when used with large list of content

[dev-horacebg]

Hey,

Thanks for putting this library together - exactly what I was looking for!

I'm currently building an app that displays a ListView with a lot of content (>10,000 items) and I'm running into some performance issues. The list itself is fine and runs at 60fps while being scrolled without using the scrollbar - even at excessive speed. When I try using the Draggable Scrollbar I notice the following spike on the performance profiler:

Performance drops to 2.1fps.

Even when there are only 500 items in the list there are still fairly a significant number of frames dropped (down to ~40fps):

The list becomes incredibly slow to scroll - the screen often locks up and it can take quite a while to recover. I'm just trying to display a letter alongside an alphabetically sorted list of names - following the instruction provided in #1 .

 return DraggableScrollbar.semicircle(
              labelConstraints:
                  BoxConstraints.tightFor(width: 80.0, height: 30.0),
              labelTextBuilder: (offset) {
                final int currentItem = offset ~/ 48.0;
                var letter =  filteredNames[currentItem].name.substring(0,1);
                return Text("$letter");
              },
              child: ListView.builder(
                  controller: _semicircleController,
                  itemCount: filteredNames.length,
                  itemBuilder: (BuildContext context, int index) {
                    return NameListItem('${filteredNames[index].name}', gender);
                  }),
              controller: _semicircleController);

Is there something wrong with my approach or am I working this component too hard?

[marica27]

Hi @dev-horacebg, thank you for reporting the issue.
I've made a few changes. Before I create a new version of package could you check that it will help you?
You can change dependency on git to check

dependencies:
  flutter:
    sdk: flutter
  draggable_scrollbar: 
    git: https://github.com/fluttercommunity/flutter-draggable-scrollbar.git

I'll wait for your results

[dev-horacebg]

Thanks. Away for a few days but will give this a try on Wednesday.

[dev-horacebg]

Hi @marica27 ,

Having followed your instructions and run the app again with the new version; it appears that the performance issues are exactly the same - still very slow with a large number of items.

[brianegan]

Hey @dev-horacebg -- Is your project open source at all, or do you happen to have any code you could share with us? It'd be great to dig into the CPU profiles using the Dart Observatory to help diagnose the exact problem with real code that's showing this behavior.

Thanks!

[dev-horacebg]

Hi @brianegan ,

Thanks for getting back to me. I've created a simple project so you can see the performance issues.
https://bitbucket.org/HoraceBG/flutter-draggable-scroll-issue

I've set the number of items to 2000 at the moment (see numberOfItems in main.dart).
The effect I'm after is the same as Google contacts where the first letter is visible as the user scrolls:

Thanks for your help.

[brianegan]

Thanks @dev-horacebg! I'll try to pull that down in the next day or two and do some performance profiling :)

[chetstriker]

I've noticed the same issue, luckily my project currently isn't loading too many items but it keeps growing size

[diablodale]

I display over 100k items very quickly. I do this by specifying the itemExtent on the ListView.builder() having the same controller as the DraggableScrollbar.
Without specifying the itemExtent, the current codebase for draggableScrollbar and ListView are together overworked calculating all 100k item extents so that they can position the scrollbar correctly and render the specific items which are in the currently viewable area.

[esDotDev]

I have logged a related bug with the Flutter team. While setting itemExtent works, it's not ideal because it forces list items to be the same height, instead of being able to expand on click, or size to their content. This is not directly related to this plugin, but is a generic problem for any large lists that use jumpTo.
flutter/flutter#52207

Please +1 it!

[Maadhav]

@dev-horacebg Can you pls tell me how you mad that UI?

[razein97]

I confirm the issue.
My app has 850 items in the list view and the scroll is not smooth even after building the release apk.
It stutters when the scrollbar is dragged quickly.
Scrolling with a relative slow speed is okay.
Using Version: ^0.0.4

Implementing cache extend to a unreasonable number fixes it but causes jank in the app as it causes the whole list of widgets to pre-render.

[buzzicards]

Hi @brianegan ,

Thanks for getting back to me. I've created a simple project so you can see the performance issues.
https://bitbucket.org/HoraceBG/flutter-draggable-scroll-issue

I've set the number of items to 2000 at the moment (see numberOfItems in main.dart).
The effect I'm after is the same as Google contacts where the first letter is visible as the user scrolls:

Thanks for your help.

@dev-horacebg please were you able to get this working??

[TheMaverickProgrammer]

This is still an issue with latest stable flutter

Framework • revision d211f42860 (4 days ago) • 2023-10-25 13:42:25 -0700
Engine • revision 0545f8705d
Tools • Dart 3.1.5 • DevTools 2.25.0```