How can I make the Text appear exactly on the center of the Row, but the button aligned to the right...

# compose

[Pablo]

How can I make the Text appear exactly on the center of the Row, but the button aligned to the right of the row?

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.Center,
    verticalAlignment = Alignment.CenterVertically
) {
    Text(
        text = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
        style = MaterialTheme.typography.titleMedium,
        color = MaterialTheme.colorScheme.onSurface,
        textAlign = TextAlign.Center,
        modifier = Modifier.weight(1f)
    )

    Button(
        onClick = {
            vm.update()
        }
    ) {
        Text("XXXXXXXXXXXXXXXXXXXXXXXXXXX")
    }
}

[Pablo]

the only way I found to do it is change the row by a box, and setting a modifier with align centerEnd on the Button. Maybe it's the only way

[Benedikt Kaiser]

you can either use spacer, or Boxscope to use align

[Zach Klippenstein (he/him) [MOD]]

Please keep code snippets more than a few lines to the thread

[Zach Klippenstein (he/him) [MOD]]

If you want the space that the text is centered in to include the space taken by the button, then yes use Box

[Zach Klippenstein (he/him) [MOD]]

Although they will overlap if the available space becomes too small