https://kotlinlang.org logo
#compose
Title
# compose
c

Christopher Mederos

02/26/2024, 6:03 AM
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
Copy code
FlowRow(modifier = Modifier.fillMaxWidth()) {
    (1..5).forEach {
        Box(
            modifier = Modifier.fillMaxWidth(0.5f)
        ) {
            Text("my content")
        }
    }
}
a

Alex Vanyo

02/26/2024, 4:39 PM
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
?
👍 1
u

Uchenna Okoye

02/26/2024, 4:47 PM
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:
Copy code
FlowRow(maxItemsInEachRow = 2, modifier = Modifier.fillMaxWidth()) {
(1..5).forEach {
        Box(
            modifier = Modifier.weight(1f)
        ) {
            Text("my content")
        }
    }
}
🚀 2
c

Christopher Mederos

02/27/2024, 1:03 AM
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 👍
👍 1
u

Uchenna Okoye

02/29/2024, 11:41 AM
You're very welcome!
2 Views