I have a multi text field in a screen in my android jetpack compose app and I want to check the textfields are not empty, button will be active and if one of textfield is empty, button will be active, I was asked for check box control, but I do not know how can I use it for multi text field, any idea?
@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun LoginScreen(
navController: NavController,
) {
val email = remember { mutableStateOf(TextFieldValue()) }
val password = remember { mutableStateOf(TextFieldValue()) }
val passwordVisibility = remember { mutableStateOf(false) }
Column(
Modifier
.fillMaxSize()
,
horizontalAlignment = Alignment.CenterHorizontally
) {
val context = LocalContext.current
OutlinedTextField(
value = email.value,
colors = TextFieldDefaults.textFieldColors(
backgroundColor = white,
focusedIndicatorColor = Grey,
unfocusedIndicatorColor = Grey,
focusedLabelColor = Grey,
unfocusedLabelColor = Grey,
cursorColor = custom,
textColor = custom,
),
onValueChange = { email.value = it },
label = { Text(text = "Email Address") },
placeholder = { Text(text = "Email Address") },
singleLine = true,
modifier = Modifier.fillMaxWidth(0.8f)
)
Spacer(modifier = Modifier.padding(2.dp))
OutlinedTextField(
value = password.value,
colors = TextFieldDefaults.textFieldColors(
backgroundColor = white,
focusedIndicatorColor = Grey,
unfocusedIndicatorColor = Grey,
focusedLabelColor = Grey,
unfocusedLabelColor = Grey,
cursorColor = custom,
textColor = custom,
),
onValueChange = { password.value = it },
label = { Text(text = "Password") },
placeholder = { Text(text = "Password") },
singleLine = true,
modifier = Modifier.fillMaxWidth(0.8f),
trailingIcon = {
IconButton(onClick = {
passwordVisibility.value = !passwordVisibility.value
}) {
Icon(
painter = painterResource(id = R.drawable.password_eye),
contentDescription = "",
tint = if (passwordVisibility.value) custom else Grey
)
}
},
visualTransformation = if (passwordVisibility.value) VisualTransformation.None
else PasswordVisualTransformation()
)
Spacer(modifier = Modifier.padding(20.dp))
Button(
modifier = Modifier
.width(285.dp)
.height(55.dp),
onClick = {
focus.clearFocus(force = true)
model.onSignUpOne(
email.value.text,
password.value.text,
)
},
colors = ButtonDefaults.buttonColors(
backgroundColor = custom
),
shape = RoundedCornerShape(30)
) {
Text(
text = "Login",
style = TextStyle(
fontSize = 18.sp,
color = white,
)
}
}}}}
CodePudding user response:
You can simply use the enabled
property of the button for this.
Button(
enabled = email.value.isNotBlank() && password.value.isNotBlank()
) {
}