flutter scroll GridView with NeverScrollableScrollPhysics

Question

I have a page in my app as the following image. At the top there is a container. Next a ListView with horizontal scrolling. Below a GridView with physics set to NeverScrollableScrollPhysics. The latter is because the grid should scroll with the page and then loading data as in page/infinite. I tried to use the ScrollController but not sure how to wire it up correctly in this setup. The ListView and GridView have separate streams where they listen for data. I've tried to create the GridView in a Stateful widget with a ScrollController and listener, but no luck activating the scroll event. Should it be wired up to the page scroll somehow because I have NeverScrollableScrollPhysics on the grid?

UPDATE: I think I found a solution. The Outer ListView has a Controller which I set to a ScrollController. I the listener I trigger loading more grid items when the size is almost the size of the grid. This way I can keep the GridView, else I think the solution by @Lucas might be good. According to the docs, A ListView should perform better compared to the SingleChildScrollView https://docs.flutter.io/flutter/widgets/SingleChildScrollView-class.html

Answer 1

There are a number of ways you can achieve this. Somehow, though, you have to avoid having nested vertical scrolling.

I would use ListView.builder as the parent of everything, and if the index is 0, build a Column with the top Container and the horizontal ScrollView, otherwise build a Row with two children (this instead of a GridView).