Tutorial 2
Render useful lists and details.
Most real apps are lists plus details. Learn to render only what is visible, keep item identity stable, and handle empty states clearly.
Target list
LazyColumn pattern
@Composable
fun BusinessListScreen(
businesses: List<Business>,
onOpenBusiness: (Int) -> Unit
) {
if (businesses.isEmpty()) {
Text("No businesses match your search.")
return
}
LazyColumn {
items(
items = businesses,
key = { business -> business.id }
) { business ->
BusinessRow(
business = business,
onClick = { onOpenBusiness(business.id) }
)
}
}
}Practice task
- Create a Business data class with id, name, category, city, phone.
- Render at least ten items using LazyColumn.
- Add an empty state when the list is empty.
- Click a row and navigate to a detail screen.