how to create a mutable state for a list in jetpack compose?

Question

how to create a mutable state for a list in jetpack compose properly i got this problem about "cannot access kotlin.collections.mutableList"

the error in this line

inputs = inputs + name

@Composable
fun CreateBar(){
    var name by remember { mutableStateOf("") }
    val inputs = remember { mutableStateListOf<String>() }
    Column {
        Row( modifier = Modifier
            .fillMaxWidth()
            .padding(20.dp , 60.dp),
            horizontalArrangement = Arrangement.Center,
            verticalAlignment = Alignment.CenterVertically)
        {
            TextField(
                value = name,
                onValueChange = { text : String ->
                    name = text
                }
            )
            Button(
                onClick = {
                        inputs = inputs + name
                }
            ) {
                Icon(
                    imageVector = Icons.Default.Search,
                    contentDescription = null,
                    modifier = Modifier
                        .height(45.dp)
                )
            }
        }
        LazyColumn {
            items(inputs){ input ->
                Text("this is"+input)
            }
        }
    }

}

Answer 1

A great question! If you are getting this error, some suggestions/alternatives to solve this problem, and also improvements from my side side->

1. Check for correct import for mutableStateList->

import androidx.compose.runtime.mutableStateListOf

2. Check for gradle for correct dependency. Even though, if you are using newer versions of android studio it won't be a problem.

3. Clean and Rebuild the project again.

4. If issue persists, then instead of using mutableStateListOf, you may use this

var inputsMut by remember { mutableStateOf<List<String>>(emptyList()) }
inputsMut = inputsMut + name //Insert the name on button click

**Note: **Remember, behind the scenes "mutableStateOf<List>()" and "mutableStateListOf" works differently. But in your case it will do the work.

5. In your existing code, You are updating the "mutableStateListOf" in wrong way. MutableStateList is already mutable so you don't need to reassign it, just modify it using ".add(name)" function.

6. As the parent layout don't use "Column" just use "LazyColumn" Otherwise it may create some unknown UI related problems.

This is the final modified code from my side =>

@Composable
fun CreateBar(
    modifier: Modifier = Modifier
){
    var name by remember { mutableStateOf("") }
    val inputs = remember { mutableStateListOf<String>() }
    var inputsMut by remember { mutableStateOf<List<String>>(emptyList()) }

    //Use lazy column as it will minimizes recomposition and also good for this type of scenarios
    LazyColumn (
        modifier = modifier
    ){
        item {
            Row( modifier = Modifier
                .fillMaxWidth()
                .padding(20.dp , 60.dp),
                horizontalArrangement = Arrangement.Center,
                verticalAlignment = Alignment.CenterVertically)
            {
                TextField(
                    value = name,
                    onValueChange = { text : String ->
                        name = text
                    }
                )
                Button(
                    onClick = {
                        inputs.add(name) // Use this to modify the input list
//                        inputsMut = inputsMut + name // Use this to modify the input list, if you are using mutableStateOf
                        name = "" // After adding change the name to empty
                    }
                ) {

                    androidx.compose.material3.Icon(
                        imageVector = Icons.Default.Search,
                        contentDescription = null,
                        modifier = Modifier
                            .height(45.dp)
                    )
                }
            }
        }
        //Use this to show the input list, if you are using mutableStateOf
//            items(inputsMut){ input ->
//                Text("this is$input")
//            }

        items(inputs){ input ->
            Text("this is$input")
        }
    }

}

I hope my answer helped you. Feel free to ask new question related to it or any further clarifications regarding this question. Thanks