Can the VisualTransformations work with a composable OutlinedTextField

Question

Material 3

I have the following code snippet of a simple password entry. However, its not building because of the following errors

@Composable invocations can only happen from the context of a @Composable function

However, if I remove the visualTransformations is works ok. I am just wondering why that is?

In the following image you can see there is a lot of red lines for errors on the Text and Image.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun PasswordEntry(
    modifier: Modifier = Modifier,
    passwordValue: String,
    placeholderText: String,
    visibilityTapped: () -> Boolean,
    onPasswordChange: (String) -> Unit,
) {
    OutlinedTextField(
        modifier = modifier.fillMaxWidth().background(
            shape = RoundedCornerShape(10.dp),
            color = MaterialTheme.colorScheme.backgroundInputEntry
        ),
        singleLine = true,
        value = passwordValue,
        onValueChange = { newInput: String ->
            onPasswordChange(newInput)
        },
        placeholder = {
            Text(text = placeholderText, color = MaterialTheme.colorScheme.placeholderEntry)
        },
        trailingIcon = {
            val visibilityIconId = if(visibilityTapped()) {
                R.drawable.hidden
            } else {
                R.drawable.visible
            }
            Image(
                painter = painterResource(id = visibilityIconId),
                contentDescription = "eye open close"
            )
        },
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
        shape = RoundedCornerShape(10.dp),
        visualTransformations = if (visibilityTapped()) {
            PasswordVisualTransformation()
        } else {
            VisualTransformation.None
        }
    )
}

Answer 1

You have to use visualTransformation instead of visualTransformations.

OutlinedTextField(
    //...
    visualTransformation = if (visibilityTapped()) {
        PasswordVisualTransformation()
     } else {
        VisualTransformation.None
     }
)