LazyColumn inside LazyColumn

Question

I am trying to create and list with sub list using LazyColumn with the code below

DropdownMenu(
    expanded = expandedDomain,
    onDismissRequest = { expandedDomain = false },
) {
    LazyColumn {
        items(1) {
            Checkbox(checked = false /*checkedState.value*/,
                onCheckedChange = {})
            Text(text = "$domainResponse.domains[0].name")
        }
        LazyColumn {
            items(domainResponse.domains[0].pwas) { pwas ->
                Checkbox(checked = false /*checkedState.value*/,
                    onCheckedChange = {})
                Text(text = "$pwas")
            }
        }
    }
}

Error:

@Composable invocations can only happen from the context of a @Composable function

did you check following link https://stackoverflow.com/questions/63801346/composable-invocations-can-only-happen-from-the-context-of-an-composable-funct — Yodgorbek Komilov, Apr 24 '22 at 20:30
@YodgorbekKomilov I am not calling any composable from onClick — Rahul Matte, Apr 24 '22 at 20:32
If you look at the constructor argument its not a `@Compose` function - `content: (@ExtensionFunctionType LazyListScope.() -> Unit`. Within the `LazyListScope` you can call other functions that accept `@Composable` functions. Just use `items { .. }` twice inside one `LazyColumn`. — Mark, Apr 24 '22 at 21:18
An example of multiple items inside one `LazyColumn` can be seeing [here](https://stackoverflow.com/a/71884867/3585796) — Phil Dukhov, Apr 25 '22 at 02:13

Abhimanyu · Accepted Answer · 2022-04-25T07:34:10.910

Let me try to explain in parts what you should be changing.

1. Why did the error occur?

@Composable invocations can only happen from the context of a @Composable function occurred

If we peek into LazyColumn code, we can find content: LazyListScope.() -> Unit as the content parameter datatype.

This shows that the context does not have composable context.

On contrary, composables like Column/Row would have content: @Composable ColumnScope.() -> Unit/content: @Composable RowScope.() -> Unit respectively.

The @Composable shows that the content has a Composable context.

2. How to fix it?

From what I see in the code, you don't need a LazyColumn inside another LazyColumn. You would need one LazyColumn with multiple items in it from different data sources.

You can change your code like this,

LazyColumn {
    item {
        Checkbox(checked = false /*checkedState.value*/,
            onCheckedChange = {})
        Text(text = "$domainResponse.domains[0].name")
    }
    items(domainResponse.domains[0].pwas) { pwas ->
        Checkbox(checked = false /*checkedState.value*/,
            onCheckedChange = {})
        Text(text = "$pwas")
    }
    // You can have multiple lists in a single LazyColumn
    items(list2Items) { item ->
        Text(text = "$item")
    }
}

3. `item` vs `items`

Use item instead of items(1) if you have a single item as they are equivalent, but this would be more clear.

P.S:
LazyColumn uses item or items which have itemContent with composable context. Hence we can add Composables inside them.

Thanks for the answer. I still have one question that I need list of lazy column inside there will be another lazy list. How can I achieve it? — Rahul Matte, Apr 25 '22 at 05:53
Can you post a video of what you are trying to achieve? A single `LazyColumn` can show data from multiple lists. — Abhimanyu, Apr 25 '22 at 07:32
thanks Abhimanyu, would you please see this questin https://stackoverflow.com/questions/72044939/kotlin-flow-out-generic — Rahul Matte, Apr 28 '22 at 13:57

LazyColumn inside LazyColumn

1 Answers1

1. Why did the error occur?

2. How to fix it?

3. item vs items

3. `item` vs `items`