Listview stuttering and jumps when scrolling up

[stevey6404]

Has your issue been reported?

• I have searched the existing issues and confirm it has not been reported.
• I give permission for members of the FlutterFlow team to access and test my project for the sole purpose of investigating this issue.

Current Behavior

• When we scroll up in a list view, it stutters and scrolls through multiple cards at a time. This is different vs a more natural scroll down the list view.
• I spoke with FlutterFlow support and they told me a way to fix it is enable Single Query in the document references in the Card component (which we've done). However the issue still persists. We even created a different version where we stripped out a lot of the widgets to only have the list view and same problem still persists.

Expected Behavior

• Scrolling up a list view should be smooth like scrolling down the list view

Steps to Reproduce

1. Create new page with an app bar
2. Create list view
3. Create card component with document references to other collection

Reproducible from Blank

• The steps to reproduce above start from a blank project.

Bug Report Code (Required)

IT40iMn1z8p2rsRE7pDUbPlFmik5JmYhaJ0omMFBaCgofePtOol3evXsQFBoONe9S3xmJ0SmmmMEpuzejofpIfEFAEyeGr5GyM8JZAvNQl+gUZOBELjtPHNtEphhJ2aH4bbQkyRRALZqL2Qi1F+UHfPIQgDvNOa3IndISq/LZO4=

Context

The scrolling behaviour is really bad on our home page.

Visual documentation

https://photos.google.com/share/AF1QipOdcGgIJzET0L9n3dLyAZwfFC7UKnz2uJyRi8UVKRcJX73owZQCmfAPS7SnyITV3w?key=RHZlTUpPWEhXZThHeWdBcDVWQ3RST2RJTkhEQmln

Additional Info

https://photos.google.com/share/AF1QipOdcGgIJzET0L9n3dLyAZwfFC7UKnz2uJyRi8UVKRcJX73owZQCmfAPS7SnyITV3w?key=RHZlTUpPWEhXZThHeWdBcDVWQ3RST2RJTkhEQmln

Environment

- FlutterFlow version: 3.19.1
- Platform: Mac and Windows
- Browser name and version: Chrome Version 123.0.6312.86
- Operating system and version affected: iOS, Windows, Android

[ignalauret]

Hey @stevey6404 thanks for your report and for the very clarifying video. To help you I need to be able to reproduce your issue, could you describe me what gesture are you doing on the list for it to behave like this?

[gsleininger]

I have this exact same issue. I wonder if it's related to the fact that my listview has a child listview? The stuttered scrolling happens when the listview is set with infinite scrolling on and pull to refresh on. The issue does not occur if you wrap the listview in a column, but then you lose the pull-to-refresh ability.

[stevey6404]

Hey @stevey6404 thanks for your report and for the very clarifying video. To help you I need to be able to reproduce your issue, could you describe me what gesture are you doing on the list for it to behave like this?

I'm simply scrolling up and down on the app with one finger.

[stevey6404]

I have this exact same issue. I wonder if it's related to the fact that my listview has a child listview? The stuttered scrolling happens when the listview is set with infinite scrolling on and pull to refresh on. The issue does not occur if you wrap the listview in a column, but then you lose the pull-to-refresh ability.

Interesting, I don't have infinite scroll enabled. So you simply wrapped this list view in a column, and it helped? But then do you make the column also scrollable even though list view is scrollable by default? I set the column as non-scrollable but then nothing would scroll.

[gsleininger]

Set the column as scrollable and primary. Set the list view as shrink wrapped and not primary. That solved the jittery scrolling for me, but that is not an acceptable solution because I’m having other flickering issues when shrink wrap is on the list view. (You have to shrink wrap the list view to wrap it in the scrollable column)

[github-actions]

This issue is stale because it has been open for 7 days with no activity. If there are no further updates, a team member will close the issue.

[gsleininger]

Please don’t close this issue. It’s a serious problem. What other information do you need in order to work on this?

[alih552]

Same issue here

[alih552]

Here is a good explanation of the issue I found on FF community:

This happens in both the mobile application and the web version of the application. Both on Android and iOS. Everywhere.

I tried converting it into a component and setting fixed sizes, but it didn’t help.

The problem is infinite scrolling. Since it unloads the list elements located above from memory. When you want to return to them, they are loaded again, after which they are drawn again. This is why this effect occurs. You can see all this in the video attached to the first post.

If the listview is converted to a column, then the entire list is loaded completely, and the top elements are not unloaded from memory, and the twitching disappears. But if there are many elements in a column, then the phone overheats and the application freezes (

This is a listview glitch with infinite scrolling. We need to solve this problem at the flutterflow level in the next updates.

You can check it yourself: Create a feed of posts using listview and fill it from the supabase database. Scroll down as far as possible. And then slowly scroll up.

References:
https://community.flutterflow.io/database-and-apis/post/there-is-a-feed-of-posts-in-the-listview-that-twitches-when-you-scroll-Y1LF4B1eBghOnhr

https://community.flutterflow.io/widgets-and-design/post/refreshing-listview-on-change-with-infinite-scroll-QdUYWkioQ4UhIhn?highlight=5ICya6T9eslSoGw