Can I update a list in StateFlow (and change Compose View) without manually generating a new one just to modify one value in the list?

Question

I have a lazyColumn of todo item

data class TodoItem(val id: Int, val title: String, var urgent: Boolean = false)


class AppViewModel : ViewModel() {
    private var todoList = mutableListOf(
        TodoItem(0, "My First Task"),
        TodoItem(1, "My Second Task", true),
        TodoItem(2, "My Third Task")
    )
    private val _todoListFlow = MutableStateFlow(todoList)

    val todoListFlow: StateFlow<List<TodoItem>> get() = _todoListFlow

    fun setUrgent(index: Int, value: Boolean) {
        val modified = todoList.toMutableList()
        modified[index] = modified[index].copy(urgent = value)
        todoList = modified
        _todoListFlow.value = modified
    }
}

And my lazyColumn as below where I can update the urgent value accordingly

@Composable
fun Greeting(name: String) {
    val todoListState = viewModel.todoListFlow.collectAsState()

    LazyColumn(modifier = Modifier.fillMaxHeight()) {
        items(items = todoListState.value, itemContent = { item ->
            Row(
                modifier = Modifier.fillMaxWidth(),
                verticalAlignment = Alignment.CenterVertically
            ) {
                Text(
                    modifier = Modifier
                        .weight(1f)
                        .padding(8.dp),
                    text = item.title
                )
                Checkbox(
                    checked = item.urgent,
                    onCheckedChange = {
                        val index = todoListState.value.indexOf(item)
                        viewModel.setUrgent(index, it)
                    }
                )
            }
         })
    }
}

All these works fine.

But I feel the function below is strange, where I have to make a new list to update the StateFlow

    fun setUrgent(index: Int, value: Boolean) {
        val modified = todoList.toMutableList()
        modified[index] = modified[index].copy(urgent = value)
        todoList = modified
        _todoListFlow.value = modified
    }

I cannot just update the todoList as below, as it will not work

    fun setUrgent(index: Int, value: Boolean) {
        todoList[index] = todoList[index].copy(urgent = value)
        _todoListFlow.value = todoList
    }

Is there a way to not needing to manually generate a modified todoList to update it?

Answer 1

I can get it to work by converting my todoList in my ViewModel from a List to a mutableStateListOf

   private var todoList = mutableStateListOf(
        TodoItem(0, "My First Task"),

Then I can change

    fun setUrgent(index: Int, value: Boolean) {
        todoList[index] = todoList[index].copy(urgent = value)
    }

Also in my compose function, I no longer need collectAsState()

val todoListState = viewModel.todoListFlow

Though this work, I feel it's odd for me to have MutableStateList in the ViewModel, and to pass through the StateFlow.