Fill max width inside FlowRow - jetpack compose

Question

I to want a row where the items goes to the next line if it gets to small. Fair enough, i am using FlowRow for that.

I want the items to take up the space on the line they are on. Ok, tried to use weight, but thats not possible.

So how can i create a Row that both goes to the next line when reaching a size limit, but also make it fill the whole possible width?

Do you use the **Accompanist** version? If yes, you can now use the official implementation as @AnnaArroyo mentioned. It was added in [library version 1.4.0-alpha04](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.4.0-alpha04). Most actual version is **1.4.0-rc01**. If you use **Compose BOM**, you might have to wait till it reaches stable status, or override the dependency for compose foundation. — goldensoju, Mar 20 '23 at 07:16
When you add `Modifier.weight(1f)` on items, they are stretched. — Psijic, May 04 '23 at 12:46

score 0 · Answer 1 · answered Mar 17 '23 at 19:34

According to the documentation for FlowRow it should behave this way automatically but adding a modifier to fill the max width might solve your issue. Here is the code snippet form the documentation with fillMaxWidth():

Column() {
    FlowRow(
        Modifier
            .fillMaxWidth(1f)
            .wrapContentHeight(align = Alignment.Top)
            .border(BorderStroke(2.dp, Color.Gray)),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.Start,
        maxItemsInEachRow = 3
    ) 
    ....
}

Fill max width inside FlowRow - jetpack compose

1 Answers1