LazyColumn does not show me the list of items

Question

I'm just learning how to use LayzyColumn. The LazyColumn does not show me the list of items. When I click the button, the items that are loaded in the list are not displayed.

Here my code:

@Composable
fun MainContent() {

    val list = remember { mutableListOf<String>() }

    LazyColumn(
        contentPadding = PaddingValues(12.dp),
        verticalArrangement = Arrangement.spacedBy(12.dp)
    ) {
        itemsIndexed(list) { index, item ->
            Card(
                backgroundColor = Color(0xFFF7C2D4),
                elevation = 4.dp
            ) {
                Row(
                    Modifier
                        .fillMaxWidth()
                        .padding(12.dp),
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Text(text = item.takeLast(5), Modifier.weight(1F))
                }

            }
        }
    }

    Box(
        modifier = Modifier
            .fillMaxWidth()
            .padding(12.dp),
        Alignment.BottomEnd
    ) {
        FloatingActionButton(onClick = { list.add(UUID.randomUUID().toString()) }) {
            Icon(imageVector = Icons.Default.Add, contentDescription = "")

        }
    }
}

Answer 1

Compose cannot track changes of plain kotlin types. You need to use Compose mutable states.

In this case mutableStateListOf should be used instead of mutableListOf.

I suggest you start with this youtube video which explains the basic principles of why do you need to use state in Compose. You can continue deepening your knowledge with state in Compose documentation.