LazyVerticalGrid in dropdown using Jetpack Compose

Question

I am trying to create a dropdown with multiple selection in android jetpack. This is the UI which needs to be created and also the code snippet.

Column(
    modifier = Modifier
        .verticalScroll(rememberScrollState())
        .fillMaxHeight()
        .fillMaxWidth(),
    verticalArrangement = Arrangement.spacedBy(10.dp),
) {
    Surface(
        color = Color.White,
    ) {
        LazyVerticalGrid(
            state = rememberLazyGridState(),
            modifier = Modifier.fillMaxSize(),
            columns = GridCells.Fixed(2),
        ) {
            itemsIndexed(items = list) { index, item ->
                ListItemView_New(text = item, model = list[index], position = index)
            }
        }
    }
}

@Composable
fun ListItemView_New(
    model: String,
    position: Int,
    text: String,
) {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight()
            .padding(vertical = 6.dp, horizontal = 16.dp),
    ) {
        Checkbox(
            checked = false,
            onCheckedChange = {

            },
            colors = CheckboxDefaults.colors(
                checkedColor = Color.Black,
                uncheckedColor = Color.Gray,
            ),
            modifier = Modifier
                .align(Alignment.CenterStart),
        )

        Text(
            text = text,
            fontSize = 18.sp,
            color = Color.Gray,
            fontWeight = FontWeight.Normal,
            modifier = Modifier
                .align(Alignment.CenterStart)
                .padding(start = 48.dp),
        )
    }
}

it gives the following error

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 think, it gives the error as there is: .verticalScroll(rememberScrollState()) and LazyVerticalGrid in the same compose.

but I am not able to find a work around. Can someone please help here.

Answer 1

By making the Column scrollable you allow its children to take up as much space as they want, more than is currently available. That's ok because you can scroll down to see the rest.

You cannot put a lazy component like LazyVerticalGrid in such an infinitely large container, though. A LazyVerticalGrid only displays the items that are currently visible. What is visible is determined by the LazyVerticalGrid's size. It takes up all available space, but when placed in an infinitely large container (as a scrollable Column) there won't be a fixed size. That's why you get the error.

The solution is simple: Either make the container finite in size by removing its scrollable modifier or explicitly set the height of the LazyVerticalGrid to some finite value.