Lists and Grids (LazyColumn, LazyRow)

Most apps show lists: chats, products, lessons, notifications, search results, and feeds. In Compose, use lazy layouts for large or scrollable lists.

LazyColumn

LazyColumn displays vertical lists efficiently.

Copy code@Composable
fun LessonList(lessons: List<String>) {
    LazyColumn {
        items(lessons) { lesson ->
            Text(
                text = lesson,
                modifier = Modifier.padding(16.dp)
            )
        }
    }
}

Lazy layouts only compose the visible items plus a small buffer. This is better than putting many items inside a normal Column.

Item Keys

Use stable keys when items can change order.

Copy codedata class Lesson(val id: String, val title: String)

LazyColumn {
    items(
        items = lessons,
        key = { it.id }
    ) { lesson ->
        Text(lesson.title)
    }
}

Keys help Compose preserve item state correctly.

LazyRow

Use LazyRow for horizontal content.

Copy codeLazyRow(
    horizontalArrangement = Arrangement.spacedBy(12.dp),
    contentPadding = PaddingValues(horizontal = 16.dp)
) {
    items(topics) { topic ->
        AssistChip(
            onClick = {},
            label = { Text(topic) }
        )
    }
}

Empty And Loading States

Lists need more than items. Handle loading, empty, and error states.

Copy codewhen {
    isLoading -> CircularProgressIndicator()
    lessons.isEmpty() -> Text("No lessons yet")
    else -> LessonList(lessons)
}

Practice

Create a list of 20 lesson objects with id, title, and duration. Render them with LazyColumn, use stable keys, and show an empty state if the list is empty.

Summary

Use lazy layouts for scrollable lists. Add stable keys, spacing, content padding, and proper loading or empty states to make list screens production-ready.