Lists and grids

Why lazy lists?

A WhatsApp chat list, a Flipkart search result, a bank statement: lists can have thousands of items. A normal Column with verticalScroll composes and measures every item, even those far off-screen, which wastes memory and makes the screen slow. Lazy layouts compose only the items that are visible (plus a small buffer), and reuse work as you scroll.

data class Txn(val id: Long, val title: String, val amount: Int)

@Composable
fun Statement(txns: List<Txn>) {
    LazyColumn(
        contentPadding = PaddingValues(16.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp),
    ) {
        item { Text("October 2026", style = MaterialTheme.typography.titleMedium) }   // a single header
        items(txns, key = { it.id }) { txn ->
            Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween) {
                Text(txn.title)
                Text("Rs ${txn.amount}")
            }
        }
    }
}

The data for a list should come from state, typically a List exposed by a ViewModel. When that list changes, for example after a new transaction arrives, the LazyColumn recomposes and shows the new items. Keep each row composable small and pass it only the data it needs.

Keys

By default, items are identified by their position. If the list changes (a new message at the top, an item deleted), positions shift and Compose may attach state, like an expanded card or a text field's content, to the wrong item. Giving each item a stable unique key, usually its database id, fixes this and lets Compose animate changes. Keys must be unique within the list.

Clickable items and dividers

items(contacts, key = { it.phone }) { c ->
    ListItem(
        headlineContent = { Text(c.name) },
        supportingContent = { Text(c.phone) },
        modifier = Modifier.clickable { onOpen(c) },
    )
    HorizontalDivider()
}

LazyRow

LazyRow works the same way horizontally, for carousels such as "Recently viewed" or category chips. A screen can have a LazyColumn containing LazyRows, as long as each lazy layout scrolls in a different direction.

Grids

@Composable
fun ProductGrid(products: List<String>) {
    LazyVerticalGrid(
        columns = GridCells.Adaptive(minSize = 150.dp),   // as many columns as fit
        contentPadding = PaddingValues(8.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp),
    ) {
        items(products) { name ->
            Card { Text(name, Modifier.padding(16.dp)) }
        }
    }
}

Scroll state

rememberLazyListState() gives you the list's scroll state. You can read which item is first visible (to show a "scroll to top" button) and scroll in code with a coroutine: scope.launch { listState.animateScrollToItem(0) }.

Common mistakes

• Using Column with verticalScroll for hundreds of items: slow and memory-hungry. Use LazyColumn.
• Putting a LazyColumn inside a Column with verticalScroll: crash ("Vertically scrollable component was measured with an infinity maximum height constraints"). Make the whole screen one LazyColumn with item { } sections.
• Duplicate keys: the app crashes. Keys must be unique.
• Doing heavy work (like formatting dates for every item) on each recomposition. Prepare the data in the ViewModel.