Infinite scroll does not work on StaggeredView

FlutterFlow / flutterflow-issues

A community issue tracker for FlutterFlow.

130 stars 26 forks source link

Infinite scroll does not work on StaggeredView #4846

Open alih552 opened 2 weeks ago

alih552 commented 2 weeks ago

Can we access your project?

[X] 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 setting Infinite scroll to True it shows a blank & empty space.

Expected Behavior

It should show the dynamic components normally inside the straggeredView comp.

Steps to Reproduce

create a firestore collection something like "products" and populate it with some data more than 30
create a straggeredView comp. & query from the products collection
in query settings set the infinite scroll to true & page size of 6 (less than 30)

Reproducible from Blank

[X] The steps to reproduce above start from a blank project.

Bug Report Code (Required)

ITEShfLl05dgotdc7ofQLflAhQcgQlgnU+cZjuxEdxMvIrbyOu9/O/elQFtuXtCod0NhHFeJkkcywdbev4T1U/VeGASufrZj+M5yED3JWXq8R7LREruWPHx5P9pUGG6i5Lujmh0lBNt1dUEj3F+XN+yAQgLqN5+/Zwh9f6PHaOI=

Visual documentation

Environment

FlutterFlow v5.0.9+ released October 25, 2024
Flutter version is 3.24.2
Windows desktop app

Additional Information

No response

Alezanello commented 1 week ago

Hello!!

I hope you're doing well!

I wanted to let you know that I wasn't able to replicate the issue. When I tested it with a page size of 6, I was able to scroll down, and it retrieved everything as expected while scrolling. It’s possible I might be missing a step or detail you took during your testing.

To help clarify, I’ve included a public project that you can clone and modify as needed: Project Link.

Additionally, here is a video demonstrating the behavior I observed for your reference.

Screen-Recording (38).mp4

Nanyorng commented 1 week ago

alih552 commented 1 week ago

Hi @Alezanello Ok so if we put a straggeredView comp. inside a scrollable column it won't work.

alih552 commented 1 week ago

github-actions[bot] commented 3 days ago

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.

Alezanello commented 14 hours ago

Unfortunately, having both the Column and the StaggeredView scrollable at the same time creates a conflict in how Flutter handles scrolling. This happens because the StaggeredView is already a scrollable widget, and when you make the parent Column scrollable (for example, by wrapping it in a SingleChildScrollView), Flutter gets confused about which widget should handle the scrolling behavior.

To avoid this issue, it's best not to make the entire Column scrollable. Instead, let the StaggeredView manage its own scrolling. Here's the idea:

Keep the Column as it is, without wrapping it in a SingleChildScrollView.
Allow the StaggeredView to handle all the scrolling independently.

This ensures smooth scrolling and avoids any conflicts. Let me know if you need further clarification or help implementing this!