Container Transform - User List

container_transform_user_list.kt

// 1
data class User(
    val name: String,
    val email: String,
)

// 2
@Composable
fun UserList(
    users: List<User>,
    modifier: Modifier = Modifier,
) {
    // 3
    LazyColumn(
        modifier = modifier,
        verticalArrangement = Arrangement.spacedBy(16.dp),
        contentPadding = PaddingValues(16.dp),
    ) {
        items(
            items = users,
            key = { user -> user.email },
        ) { user ->
            // 4
            UserCard(
                user = user,
                modifier = Modifier.fillMaxWidth(),
            )
        }
    }
}

// 5
@Composable
fun UserCard(
    user: User,
    modifier: Modifier = Modifier,
) {
    Card(modifier = modifier) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(all = 16.dp),
            verticalArrangement = Arrangement.spacedBy(16.dp),
        ) {
            LineListItem(label = "Name", value = user.name)
            LineListItem(label = "Email", value = user.email)
        }
    }
}

// 6
@Composable
fun LineListItem(
    label: String,
    value: String,
    modifier: Modifier = Modifier
) {
    Column(
        verticalArrangement = Arrangement.spacedBy(8.dp),
        modifier = modifier,
    ) {
        Text(text = label, style = MaterialTheme.typography.bodyMedium)
        Text(text = value, style = MaterialTheme.typography.bodyLarge)
    }
}