Looking for some help understanding how orientatio...

# compose

[Christopher Mederos]

Looking for some help understanding how orientation affects FlowRow. I'm using FlowRow to create two columns of content, however, when I rotate my device orientation to horizontal... the content switches to a single column layout

FlowRow(modifier = Modifier.fillMaxWidth()) {
    (1..5).forEach {
        Box(
            modifier = Modifier.fillMaxWidth(0.5f)
        ) {
            Text("my content")
        }
    }
}

[Alex Vanyo]

The orientation shouldn’t be directly related here, other than different orientations will impact the size available for the FlowRow.

I have a suspicion this is due to some rounding - could you debug by checking the resulting size of the FlowRow and the size of each Box?

[Uchenna Okoye]

Hi Christopher, agree with Alex. Some rounding could potentially lead to the other item not fitting.

Instead of that, I would do something more like this:

FlowRow(maxItemsInEachRow = 2, modifier = Modifier.fillMaxWidth()) {
(1..5).forEach {
        Box(
            modifier = Modifier.weight(1f)
        ) {
            Text("my content")
        }
    }
}

[Christopher Mederos]

Thanks for the suggestions! I added some logging and indeed it was a rounding issue. When in horizontal orientation my parent composable had an odd numbered width, whereas in vertical orientation it had an even numbered width. The width of the boxes was rounding up from half of the parent width, so the odd number led to two boxes with a total width 1.dp too wide.

Using Modifier.weight(1f) instead has fixed the issue for me. It's a better approach otherwise too, so thanks for the advice again there 👍

[Uchenna Okoye]

You're very welcome!