LazyVerticalStaggeredGrid inside LazyColumn get infinity maximum height constraints error

I have a LazyColumn with an item that contains a LazyVerticalStaggeredGrid. By default, that item has that Grid invisible and when you tap it, the grid is visible. When the Grid is visible, the app crashs and i get the following error:

java.lang.IllegalStateException: Vertically scrollable component was measured with an infinity maximum height constraints, which is disallowed. One of the common reasons is nesting layouts like LazyColumn and Column(Modifier.verticalScroll()). If you want to add a header before the list of items please add a header as a separate item() before the main items() inside the LazyColumn scope. There are could be other reasons for this to happen: your ComposeView was added into a LinearLayout with some weight, you applied Modifier.wrapContentSize(unbounded = true) or wrote a custom layout. Please try to remove the source of infinite constraints in the hierarchy above the scrolling container.

I just want that grid for the effect the items do inside it.

This is my code:

@Composable
fun Test() {

    LazyColumn(
        Modifier.fillMaxSize().padding(vertical = 40.dp, horizontal = 16.dp)
    ) {
        item { MyGrid("Task Monday") }
        item { MyGrid("Task Tuesday") }
    }
}

@Composable
fun MyGrid(text: String) {

    var expanded by remember { mutableStateOf(false) }
    val tasks = listOf<String>(
        "Make the bed",
        "Pick up the clothes",
        "Feed the pet",
        "Clean the dishes",
        "Work out",
    )

    Column(Modifier
        .clickable { expanded = !expanded }
        .padding(horizontal = 8.dp, vertical = 12.dp)) {

        Text(
            text = text, fontSize = 14.sp,
        )

        AnimatedVisibility(expanded) {

            LazyVerticalStaggeredGrid(
                columns = StaggeredGridCells.Adaptive(88.dp),
                verticalItemSpacing = 8.dp,
                horizontalArrangement = Arrangement.spacedBy(8.dp),
                userScrollEnabled = false,
            ) {
                items(tasks) { task ->
                    CardItem(task)
                }
            }
        }
    }
}

I can solve this problem given a fixed height to the LazyVerticalStaggeredGrid but i don’t know the height it will have, since the height of the CardItem can vary.

This is the result with Modifier.height(300.dp) on LazyVerticalStaggeredGrid

You need to sign in to view this answers