We have a requirement to have a row with two boxes, and the width of each box is same as the widest ...

# compose

[allan.conda]

We have a requirement to have a row with two boxes, and the width of each box is same as the widest box. Any idea how to achieve this optimally in Compose?
I have a working solution but it requires multiple passes and flickers in the process.

[Dominaezzz]

Layout modifier maybe

[Mihai Popa]

You can try:

Row(Modifier.width(IntrinsicSize.Max)) {
    Box1(Modifier.weight(1f))
    Box2(Modifier.weight(1f))
}

[dbaelz]

Yeah, Box1 and 2 as Box and in combination with propagateMinConstraints = true in the Boxes it should work.

Works without, but the background color must be set on the box. Did try it out quick and dirty and looks fine. Thanks @Mihai Popa, I'm sure I need that in the future, too. 😉

Box(
    modifier = Modifier.fillMaxSize().background(Color.Yellow),
    contentAlignment = Alignment.Center
) {
    Row(
        Modifier.width(IntrinsicSize.Max).fillMaxHeight()
    ) {
        Box(
            modifier = Modifier.fillMaxHeight().weight(1f).background(Color.Green)
        ) {
            Text(text = "Short")
        }

        Spacer(Modifier.width(16.dp))

        Box(
            modifier = Modifier.fillMaxHeight().weight(1f).background(Color.Blue)
        ) {
            Text(text = "Long Box")
        }
    }
}

[allan.conda]

Huh, I considered IntrinsicSize.Max but didn’t think that would work. Would you mind explaining how this code works?
Weight is relative to siblings and the maximum width.
I don’t understand where IntrinsicSize.Max bases the size from.

Anyway, let me try this. 😄

Edit: Works! Thanks