Hi I am trying to change visualTransformation dynamically when the user click on see password button. I can manage to filter password but couldn't achive to show in plain text. Any idea for that ? Here is what I got so far.
fun UserInputText(
keyboardType: KeyboardType = KeyboardType.Text,
onTextChanged: (TextFieldValue) -> Unit,
textFieldValue: TextFieldValue,
visualTransformation: VisualTransformation = VisualTransformation.None,
borderColor: Color = editTextBorderColor,
keyboardShown: Boolean,
onTextFieldFocused: (Boolean) -> Unit,
focusState: Boolean,
placeholder: String = "",
modifier: Modifier = Modifier
) {
Box(
modifier = modifier.border(
width = 2.dp,
color = borderColor,
shape = RoundedCornerShape(16.dp)
)
) {
var lastFocusState by remember { mutableStateOf(FocusState.Inactive) }
val focusRequester = FocusRequester()
val focusRequesterModifier = Modifier.focusRequester(focusRequester)
BasicTextField(
value = textFieldValue,
onValueChange = { onTextChanged(it) },
modifier =
modifier.focus().then(focusRequesterModifier)
.align(Alignment.TopStart)
.focusObserver { state ->
if (lastFocusState != state) {
onTextFieldFocused(state == FocusState.Active)
}
lastFocusState = state
},
keyboardOptions = KeyboardOptions(
keyboardType = keyboardType,
imeAction = ImeAction.Send
),
visualTransformation = visualTransformation,
maxLines = 1,
cursorColor = inputTextColor,
textStyle = MaterialTheme.typography.body1.copy(color = inputTextColor)
)
if(keyboardType == KeyboardType.Password) {
Image(
vectorResource(id = R.drawable.ic_icons_watch_count_24), modifier = Modifier
.align(Alignment.TopEnd)
.padding(end = 16.dp, top = 16.dp).clickable(onClick = {})
)
}
}
}
Check this:
var passwordVisibility: Boolean by remember { mutableStateOf(false) }
TextField(value = "Enter Password",
visualTransformation = if (passwordVisibility) VisualTransformation.None else PasswordVisualTransformation(),
leadingIcon = {
IconButton(onClick = {
passwordVisibility = !passwordVisibility
}) {
Icon(imageVector = vectorResource(id = R.drawable.ic_icons_watch_count_24))
}
},
onValueChange = { })