I want to add LazyRow, LazyColumn & LazyVerticalGrid inside vertically scrollable column. But when i add LazyVerticalGrid it causes error.

java.lang.IllegalStateException: Nesting scrollable in the same direction layouts like ScrollableContainer and LazyColumn is not allowed. If you want to add a header before the list of items please take a look on LazyColumn component which has a DSL api which allows to first add a header via item() function and then the list of items via items().

Any help ?

I posted a similar question earlier today https://kotlinlang.slack.com/archives/CJLTWPH7S/p1630933491339200 I haven't concluded yet, but it's not looking promising.

That whole screen can be one big

LazyColumn

,

LazyRow

will then be its first

item

and items from your LazyColumn will be the last items. For the LazyGrid, take a look at its source code - it's just a LazyColumn with some special stuff inside - take that code and add it directly to your top level LazyColumn.

I answered a similar question… I hope it helps you… https://stackoverflow.com/questions/66908737/what-is-the-equivalent-of-nestedscrollview-recyclerview-or-nested-recyclerv/66913480#66913480

@Jan Bína @nglauber Thanks for the input. Both my use case and the OP mention LazyColumn for a reason. The items cannot be loaded all at ones. Correct me if I’m wrong, but your suggestions would both load all content at ones. What mechanism would lazy load the last column? Thanks

Nope, my suggestion will lazy load all the items. It will look something like this:

LazyColumn {
  item { LazyRow {} }

  item {
    Row {
      Text("First grid item")
      Text("Second grid item")
      Text("Third grid item")
    }
  }

  item {
    Row {
      Text("4th grid item")
      Text("5th grid item")
      Text("6th grid item")
    }
  }

  item { Text("First item from bottom lazy column") }
  item { Text("Second item from bottom lazy column") }
}

The only trickier part is creating items for the grid, for this, refer to

LazyVerticalGrid

source code, you will have to copy its implementation. Is it clear now?

I’m not sure we’re on the same page, but I’ll dig some more based on your suggestions. I can’t see how each “module” here (row/column) can paginate independently.

Adding a lazy column within a scrollable vertical container does not make any sense, the lazy column will never be lazy in that case. Use either a normal column, or make the parent layout a lazy column or lazy vertical grid and fit your elements like that

It may not make sense technically, but it makes sense conceptually 🙂

conceptually in what way?

pretty disappointing as flutter has this functionality out of the box. https://api.flutter.dev/flutter/widgets/SliverList-class.html

@Joost Klitsie I'm not trying to argue. I see how it can be solved using the approach above. However, conceptually it's simple. And the concept has nothing to do with implementation 🙂 It can be solved by using nested scrolling. This is possible on iOS and Flutter. How can it be done? Well, the nested vertically scrolling module can scroll internally when it covers the viewport (screen/container). This way when you scroll up again it scrolls internally until it has reached the top. It then stops consuming scroll events and the parent takes over.