Repository navigation
ListView Builder scrolling is slow due to improper input events handling #22314
Description
The ListView Builder is slow compared to native apps. I've attached a video demo-ing my experience. And my complete code (which is basically just the example on the Working with long lists guide.
The gif has the flutter listview and also shows the scrolling of Reddit Is Fun app as well just for a reference.
main.dart
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
body: ListView.builder(
key: Key("lvbuildertest"),
itemCount: 200,
itemBuilder: (context, index) {
return ListTile(title: Text("index: $index"));
}),
),
);
}
}
[√] Flutter (Channel master, v0.9.4-pre.31, on Microsoft Windows [Version 10.0.17134.285], locale en-GB)
• Flutter version 0.9.4-pre.31 at F:\androidsdk\flutter
• Framework revision 52697ef962 (11 hours ago), 2018-09-26 07:57:05 +0200
• Engine revision 38a646e14c
• Dart version 2.1.0-dev.5.0.flutter-4cf2d3990b
[√] Android toolchain - develop for Android devices (Android SDK 28.0.2)
• Android SDK at F:\androidsdk
• Android NDK location not configured (optional; useful for native profiling support)
• Platform android-28, build-tools 28.0.2
• Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
• Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b02)
• All Android licenses accepted.
[√] Android Studio (version 3.1)
• Android Studio at C:\Program Files\Android\Android Studio
X Flutter plugin not installed; this adds Flutter specific functionality.
X Dart plugin not installed; this adds Dart specific functionality.
• Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b02)
[!] IntelliJ IDEA Ultimate Edition (version 2018.1)
• IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA 2018.1.5
X Flutter plugin not installed; this adds Flutter specific functionality.
X Dart plugin not installed; this adds Dart specific functionality.
• For information about installing plugins, see
https://flutter.io/intellij-setup/#installing-the-plugins
[√] VS Code (version 1.27.2)
• VS Code at C:\Users\username
\AppData\Local\Programs\Microsoft VS Code
• Flutter extension version 2.18.0
[√] Connected devices (1 available)
• SM N9005 • 192.168.0.3:5555 • android-arm • Android 8.1.0 (API 27)
! Doctor found issues in 1 category.
Activity
zoechi commentedon Sep 27, 2018
#20857 might be related
iamarnas commentedon Oct 6, 2018
@kieferlam Have you tried to add
physics: const AlwaysScrollableScrollPhysics (),it will make smother scrolling.kieferlam commentedon Oct 6, 2018
@iamarnas That has definitely improved scrolling performance! Thanks.
bobmoff commentedon Jan 6, 2019
I am curious to why
AlwaysScrollableScrollPhysicswould improve the performance of scrolling ? Isn't this widget just to make scrollable widgets that have too few items (and would therefor not be scrollable atm) scrollable.I am also comparing scrolling in Flutter with native scrolling on iOS and there seem to be lots of missing frames here and there in Flutter and sometimes longer pauses. I am running on an iPhone X so its not some low end device. I heard that ListViewTiles are NOT recycled in Flutter, is this true? and if so, Why ? In game development, where every frame counts it is very important to have object pools to be able to show and hide render-objects fast without destroying and creating objects all the time.
lirbank commentedon Jan 14, 2019
Are you running the app in debug or release mode? On my Moto x4 (kinda low end device) scrolling is jerky in debug mode, but once compiled for production it is just as smooth as Native apps.
kieferlam commentedon Jan 14, 2019
@lirbank The app was running in release mode. Not sure what the state of this issue is right now since newer versions have been released. My device was a Samsung Galaxy Note 3 (not sure how that compares though)
kraa commentedon Jan 15, 2019
Same lags here. Tried both advices (
AlwaysScrollableScrollPhysicsand release) - no result. On some devices it's feels smoother , on some - not. And notice lots of missing frames .zoechi commentedon Jan 15, 2019
@kraa you are testing with release or profile builds, not with debug builds, right?
kraa commentedon Jan 15, 2019
Yeah, release build (no debug label top right corner of screen)
tirnovali commentedon Jan 26, 2019
same problem here
zoechi commentedon Jan 27, 2019
@kraa @tirnovali
To investigate we would need a minimal runnable reproduction
as a single file so that we can just copy your code into
lib/main.dartof a new project and run to reproduce.80 remaining items
klaszlo8207 commentedon Apr 22, 2020
Any news on this? Please it is very fustrating
pilotviper134 commentedon Apr 22, 2020
The problem still appears on my Huawei P30 Pro device. Using cacheExtent slightly helped with performance. However, the list can still be trimmed at the very end of the scrolling.
Renatinaveen commentedon Apr 23, 2020
https://drive.google.com/file/d/1a3ZJ099XSJ-lvHDc2DVadExAYT3kAM3r/view?usp=drivesdk
That's on iphone 6s
https://drive.google.com/file/d/1w5dEXmKuiKXadzXSxiVbb2GjR05htY6Z/view?usp=drivesdk
This is OnePlus 6t.
I don't understand what the problem is while scrolling up I get this issue.
leszekkrol commentedon May 1, 2020
Why this issue is closed? Problem still occurred
iamarnas commentedon May 1, 2020
@leszekkrol It's quick fix. They close many issues for no reason.
fadhlisulaimi commentedon May 1, 2020
I tried switching to dev channel and updating to latest version.
Not sure if its just a placebo effort but i feel the scrolling is smoother.
firatcetiner commentedon May 9, 2020
@x4080
Not good actually. Every item in the list consist of:
Textwidgets, one of the may text includes a long text (400 characters) sometimes,The structure is like this: Container>Column>[Row[Text, Image], Text, Text, Buttons]
With the cacheExtent = 10000.0 and assuming the average height of a child widget is 600 pixels, it should cache at least 15 items per list. Since I have 4 separate lists on different parts of the app at the same time, this means at least 60 items are in the cache. Assuming the cache size is determined for just only one direction Up or Down but not both.
In this case, the memory usage is around ~400MB. I'm not sure this is okay but it seems like a lot.
filiph commentedon May 11, 2020
Hi all, this is an outdated issue, and the explanation to it is unfortunately buried in the noise. Moreover, GitHub collapses the middle of the thread, which includes the reason for closing this issue, and it's really easy to overlook it.
I want to summarize some things for better discoverability:
debugmode. It is understood thatdebugmode is much slower thanprofileorrelease. There's only so much the Flutter SDK can do while also allowing for hot reloading, failing fast, etc. If you want to push the Flutter team to makedebugmode faster in a specific scenario, please file a separate issue.@Hixie, @liyuqian: Would it make sense to rename this issue to something more specific? Would it make sense to close comments on this issue so people don't accidentally bury this information again?
esDotDev commentedon May 11, 2020
I have filed a fairly specific issue:
#52207
It is quite easy to get janky scrolling performance once you attach it to a Scrollbar that calls JumpTo.
Builder just doesn't seem optimized for successive calls to JumpTo like a Scrollbar does.
liyuqian commentedon May 12, 2020
@filiph : I also lost track of what this issue is about and what PR fixed it... Ian's comments #22314 (comment) and #22314 (comment) are the closest that I find. @Hixie : I recently noticed "lock bot" sending me a lot of emails. Shall we also lock this issue to incentivize folks to open new issues?
leszekkrol commentedon May 13, 2020
Any update in that case?
Martibis commentedon May 13, 2020
This is a massive problem a lot of people are facing and key to Flutters adoption in my opinion. You advertise smooth fps, but a basic functionality like scrolling dynamic content can not get the advertised native level smoothness.
[-]ListView Builder scrolling is slow[/-][+]ListView Builder scrolling is slow due to improper input events handling[/+]liyuqian commentedon May 13, 2020
I've changed the title per @filiph 's suggestion to clarify that this issue is about input events handling and it's fixed according to comment (1) and (2).
If there are other performance issues related to ListView, please create a new issue following the suggestion in comment (1) and (2).
We understand your performance concerns and we'll definitely work very hard to fix it. It's just difficult for us to follow an old Github issue with a lot of unrelated comments. So I'm locking down this issue to encourage creating new and focused issues with details of how to reproduce the performance issue. Please feel free to reference me by @liyuqian in the new issues.