I want the width of the row that contains the button and the text to have the same width as the Text Fields. Here is what I have tried:
Column(
modifier = Modifier.fillMaxSize().padding(padding),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
TextField(
value = email,
onValueChange = { email = it },
placeholder = {Text(text = "Email")}
)
TextField(
value = password,
onValueChange = { password = it },
placeholder = {Text(text = "Pass")}
)
Row {
Button(
onClick = {
start(email, password)
}
) {
Text(
text = "Start",
fontSize = 18.sp
)
}
Spacer(
modifier = Modifier.weight(1f)
)
Text(
text = "Skip"
)
}
}
This is what I get:
And this is what I expected:
Can I achieve that without setting fixed sizes?
You can wrap the 3 composable with a Column
and apply an intrinsic measurements to it using Modifier.width(IntrinsicSize.Min)
and then apply fillMaxWidth()
to the Row
with the Button
:
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Column(Modifier.width(IntrinsicSize.Min)){
TextField()
TextField()
Row(
horizontalArrangement = Arrangement.Center,
modifier = Modifier.fillMaxWidth()
) {
//Button + Skip Text
}
}
}