StaggeredView slipping when scrolling down

[alcardenasph]

Can we access your project?

• 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

I am building a social feed using staggeredview widget. It is under a column as I added the staggeredview widget under a tabbar widget.

Now, the column widget isn't scrolling, only the staggeredview widget.

I have infinite scroll enabled, single time query disabled, page size at 25.

The image widget under the staggeredview widget has a specific size based on the image dimension uploaded by the user. It is specific because I am using blurhash.

Now, when I scroll down, everything is smooth.

But when I scroll up, that's when the slipping/skipping occurs.

Whenever I disable infinite scroll and enable scrolling on column, the issue isn't present.

My goal for the app is to not load all of the images under the staggeredview widget all at once, hence me enabling infinite scroll and keeping single time query disabled (so new posts/images will load instantly).

I am new to FlutterFlow, so please bear with me.

I hope you could help me fix this issue.

Thank you!

Expected Behavior

What I expect to happen is that the scrolling up won't have slipping/skipping behavior. I understand that when the loaded image widgets are out of viewport, and I scroll back up to see them again, that the images have to be loaded again (same with scrolling down when images are being loaded as I scroll down, at least this is my assumption).

I am basically expecting a smooth scroll up experience, the same with the scroll down experience.

Steps to Reproduce

1. Go to "home" page
2. Run in stable mode
3. Scroll down under "Discover" and "Following" tabs (where the staggeredview widget is located)
4. Then, scroll back up to see the slipping/skipping issue.

Reproducible from Blank

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

Bug Report Code (Required)

ITEez/Ll/Y1Oj70E15fiKflVowMzHUR/UIIZjNVxaxQjCYDuBIYiaff8bhRuOPW5S2NPKEWKhTg0w6HHuPDPU8JfHySabtk+/rt6SAyUfHm/aovQCajpT38lEdNWI0fF0cOVvghAVdFiL0Ii7FOEDN6XfDDZNof4Zwh9f6PHaOI=

Visual documentation

Untitled.design.mp4

Scroll.up.slipping.mp4

Environment

- FlutterFlow version: 6.0.21 (released June 17, 2025)
- Platform: Web
- Browser name and version: Chrome 137.0.7151.120
- Operating system and version affected: Windows 11 10.0.22000

Additional Information

The said slipping/skipping issue is also present on both iOS and Android, not just on the web.

[Alezanello]

Hello!

Could you try converting the Image widget into a component and assigning a unique key to each of the dynamically generated children? That might help ensure proper rendering and state handling.

[alcardenasph]

Hi, @Alezanello!

Sure! Let me try that and get back to you! Appreciate it!

[alcardenasph]

hI, @Alezanello!

I tried your suggestion to convert the image widget into a component as well as assigning a unique key to each dynamically generated children, but the issue is still there.

On web, the issue isn't that obvious, but on iOS and Android, no improvements can be seen.

[alcardenasph]

I tried wrapping the component into a container, added the height of the image to the said container, and it fixed the slipping issue.

Thank you for the swift assist!