Cards and Lazy Lists
Sprout's home screen is a list of plants, each on its own card. With five plants anything works. With three hundred, the wrong choice makes scrolling stutter. This lesson brings together everything in the section: text, icons, layouts and state, inside a fast list.
The rule
A Card holds one thing; a lazy list only builds what you can see.
Card is a Material surface with rounded corners and a subtle elevation or outline. It groups one item's content, and its inside is a normal content slot:
@Composable
fun PlantCard(plant: Plant, onClick: () -> Unit) {
Card(onClick = onClick, modifier = Modifier.fillMaxWidth()) {
Column(Modifier.padding(16.dp)) {
Text(plant.name, style = MaterialTheme.typography.titleMedium)
Text("Water every ${plant.days} days")
}
}
}LazyColumn is the list container. A plain Column composes every child immediately, including ones far below the screen. LazyColumn composes only the items currently visible (plus a few nearby) and creates more as the user scrolls. LazyRow does the same horizontally.
LazyColumn(contentPadding = PaddingValues(16.dp)) {
items(plants, key = { it.id }) { plant ->
PlantCard(plant, onClick = { open(plant.id) })
}
}items(list)creates one entry per element.keygives each entry a stable identity, so when a plant is added or removed, the others keep their state and animate correctly.
Note that you cannot call composables directly inside LazyColumn's lambda: it is a list builder, not a composable body, so entries are added with items or item.
The shortcut
Ask "could this list grow beyond one screen?" If yes, use LazyColumn with items and a key. If it is a short, fixed set, a Column is fine.
One item's look
Name and schedule on a raised surface →
PlantCardbuilt onCard.
Drills
Answer fast — trust the rule.
Why is LazyColumn better than Column for 300 plants?
Inside LazyColumn { }, how do you add one entry per plant?
What does key = { it.id } give each list entry?
A settings screen always shows the same four options. Which container is enough?
Remember
- A Card holds one thing; a lazy list only builds what you can see.
- Growing lists →
LazyColumnwithitemsand akey. - Short, fixed content → a plain
Columnis fine.