How to add texdfields at runtime and manage those textfields values in android jetpack compose?

Question

I want to create a Rate List application using jetpack compose. Rate List have different items and each item have different price according to weight. For Example Apple(Items) 1kg price is 100Rs and for 5kg price is 400Rs etc. Like apple different items have differnet price and weight. Problem is that how to create textfield at rumtime and manage these values of weight and price. I try this jetpack compose code

@compose 
fun ComposeTextFields() {
var weightTextField = remember {
    mutableStateListOf<String>()
}
var priceTextField by remember {
    mutableStateOf("")
}
var number by remember {
    mutableStateOf(0)
}
Column {
    LazyColumn {
        items(number){
            Row {
                OutlinedTextField(
                    value = weightTextField[number-1],
                    onValueChange = { weightTextField.add(number-1, it) },
                    label = { Text(text = "Weight") },
                    modifier = Modifier.weight(1f)
                )
                OutlinedTextField(
                    value = priceTextField,
                    onValueChange = {priceTextField = it },
                    label = { Text(text = "Price")},
                    modifier = Modifier
                        .weight(1f)
                        .padding(start = 5.dp)
                )
            }
        }
        item {
            TextButton(onClick = { ++number }) {
                Text("more $number")
            }
        }
    }
  }
}

OutPut Screen

Output screen of my try

Please solve this problem

Your code crashes when I click on the button – Phil Dukhov Sep 12 '21 at 10:36 — Phil Dukhov, Sep 12 '21 at 10:36

score 0 · Accepted Answer · answered Sep 12 '21 at 15:14

Here's your code working :)

@Composable
fun ComposeTextFields() {
    val weightTextField = remember {
        mutableStateListOf<String>()
    }
    val priceTextField = remember {
        mutableStateListOf<String>()
    }
    var number by remember {
        mutableStateOf(0)
    }
    Column {
        LazyColumn {
            items(number) { index ->
                Row {
                    OutlinedTextField(
                        value = weightTextField[index],
                        onValueChange = { weightTextField[index] = it },
                        label = { Text(text = "Weight") },
                        modifier = Modifier.weight(1f)
                    )
                    OutlinedTextField(
                        value = priceTextField[index],
                        onValueChange = {
                            priceTextField[index] = it
                        },
                        label = { Text(text = "Price") },
                        modifier = Modifier
                            .weight(1f)
                            .padding(start = 5.dp)
                    )
                }
            }
            item {
                TextButton(onClick = {
                    ++number
                    weightTextField.add("100g")
                    priceTextField.add("100")
                }) {
                    Text("more $number")
                }
            }
        }
    }
}

How to add texdfields at runtime and manage those textfields values in android jetpack compose?

1 Answers1