Jetpack Compose: Is it possible to call an Composable function on a button click in another Composable function?

Question

When I tried to write text, on a buttonClick event, I ran into the problem, that I can't call a @Composable function inside another function because of the: @Composable invocations can only happen from the context of a @Composable function error. I tried to call the showResult function inside the Composable BeCalc function on a button click event. Any ideas? Thanks

@Composable fun showResult(result: Int?) { Text( buildAnnotatedString { if(result != null && result != 0){ append("Unnecessary Text") withStyle(style = SpanStyle(color = MaterialTheme.colors.primaryVariant)) //Einheiten-Anzahl in Farbe { append("$result") } append("Unnecessary Text") } }, modifier = Modifier.padding(top = 48.dp), fontSize = 20.sp, fontWeight = FontWeight.Bold ) } @Composable fun BeCalc(openDrawer: () -> Unit) { var valueCarbohydrate by remember { mutableStateOf(TextFieldValue("")) } var valueQuantity by remember { mutableStateOf(TextFieldValue("")) } var result: Int? = 0 Button( modifier = Modifier.padding(top = 24.dp), colors = ButtonDefaults.buttonColors(MaterialTheme.colors.primaryVariant), onClick = { val intValueQuantity = valueQuantity.text.toInt() val intValueCarbohydrate = valueCarbohydrate.text.toInt() if (intValueQuantity != null && intValueCarbohydrate != null) { result = (intValueCarbohydrate / intValueQuantity) showResult(result) } else { println("No value!") } })Button( modifier = Modifier.padding(top = 24.dp), colors = ButtonDefaults.buttonColors(MaterialTheme.colors.primaryVariant), onClick = { val intValueQuantity = valueQuantity.text.toInt() val intValueCarbohydrate = valueCarbohydrate.text.toInt() if (intValueQuantity != null && intValueCarbohydrate != null) { result = (intValueCarbohydrate / intValueQuantity) showResult(result) } else { println("No value!") } } ) }

You can use a variable e.g. showResult and by default it's false and you set it true inside onclick function and later in composable function level add if (showResult) { showResult(result) } — Courtesy
– Courtesy, Commented Jan 23, 2023 at 22:23

Gabriele Mariotti · Accepted Answer · 2023-01-23 22:27:38Z

Compose doesn't work in this way.
You can't call a composable inside the onClick paramenter to display the updated value.
Instead you have to use a state and update it in the onClick.

Something like:

var count by rememberSaveable { mutableStateOf(0) } var shouldShowResult by remember { mutableStateOf(false) } Button( //.. onClick = { val intValueQuantity = valueQuantity.text.toInt() val intValueCarbohydrate = valueCarbohydrate.text.toInt() if (intValueQuantity != null && intValueCarbohydrate != null) { count = (intValueCarbohydrate / intValueQuantity) shouldShowResult = true } else { println("No value!") } } ){ Text("Show Result") } if (shouldShowResult) { showResult(count) }

Collectives™ on Stack Overflow

Jetpack Compose: Is it possible to call an Composable function on a button click in another Composable function?

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related