You have infinite scroll enabled for a ListView, but the ListView is loading all items instead of loading a certain number of items per page.

Infinite scroll is a popular feature in mobile applications that allows users to continuously load more content as they scroll through a list. However, implementing infinite scroll in a ListView can lead to unexpected behavior if not done correctly. In this article, we will discuss best practices for implementing infinite scroll in ListView and how to avoid common pitfalls.

This issue typically arises when the ListView expands indefinitely because there is no limit on its height. As a result, the query loads all the items as there is no indication of where the end of the available height is.

To fix this issue, the ListView needs to be "aware" of the available space in order to calculate the number of items to load on each page. For example, if the ListView has 800px space, and each item is 100px in height, it should load 10 items, displaying 8 in the view and 2 out of view. As the user scrolls, the next set of 10 items should be loaded.
​

Turn off the scroll on the column and let the ListView itself do the scroll with the primary option turned on and expanded options. With this configuration, the ListView knows the page height and adjusts the items accordingly.
​

If you want to put the listView inside a scrollable widget and want to implement infinite scroll, wrap the ListView inside a container with a fixed height or max-height.
​
For example, in the project example provided, the main scrollable is the column, and the ListView is wrapped inside a container with a fixed height of 500px. The ListView scrolls until it reaches the end, and then the page starts to scroll.
​

In this example, the ListView widget is not expanded, and the red box at the bottom of the page indicates empty space, indicating that the ListView cannot determine the height.

The column, as the parent of the ListView, has the scrollable option, making it impossible for the ListView to determine the height and adjust the items based on a fixed height.

Implementing infinite scroll in ListView can improve user experience by allowing users to continuously load content as they scroll. However, it is essential to configure the ListView correctly to avoid unexpected behavior.

By following best practices, such as calculating the number of items to load and wrapping the ListView in a container with a fixed height or max-height, developers can ensure a seamless and enjoyable user experience.
​

You can check the project example here to see them all in action in Flutterflow
​https://app.flutterflow.io/project/list-view-scroll-example-wdv076
​
​
​