FlowRow

Composable Function
Common
Deprecated The overflow parameter has been deprecated
@Composable
@ExperimentalLayoutApi
fun FlowRow(
    modifier: Modifier = Modifier,
    horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
    itemVerticalAlignment: Alignment.Vertical = Alignment.Top,
    maxItemsInEachRow: Int = Int.MAX_VALUE,
    maxLines: Int = Int.MAX_VALUE,
    overflow: FlowRowOverflow = FlowRowOverflow.Clip,
    content: @Composable FlowRowScope.() -> Unit,
)

FlowRow is a layout that fills items from left to right (ltr) in LTR layouts or right to left (rtl) in RTL layouts and when it runs out of space, moves to the next "row" or "line" positioned on the bottom, and then continues filling items until the items run out.

When a Modifier RowScope.weight is provided, it scales the item based on the number items that fall on the row it was placed in.

Note that if two or more Text components are placed in a Row, normally they should be aligned by their first baselines. FlowRow as a general purpose container does not do it automatically so developers need to handle this manually. This is achieved by adding a RowScope.alignByBaseline modifier to every such Text component. By default this modifier aligns by androidx.compose.ui.layout.FirstBaseline. If, however, you need to align Texts by androidx.compose.ui.layout.LastBaseline for example, use a more general RowScope.alignBy modifier.

Parameters
modifier The modifier to be applied to the Row.
horizontalArrangement The horizontal arrangement of the layout's children.
verticalArrangement The vertical arrangement of the layout's virtual rows.
itemVerticalAlignment The cross axis/vertical alignment of an item in the column.
maxItemsInEachRow The maximum number of items per row
maxLines The max number of rows
overflow The strategy to handle overflowing items
content The content as a RowScope
Common
@Composable
fun FlowRow(
    modifier: Modifier = Modifier,
    horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
    itemVerticalAlignment: Alignment.Vertical = Alignment.Top,
    maxItemsInEachRow: Int = Int.MAX_VALUE,
    maxLines: Int = Int.MAX_VALUE,
    content: @Composable FlowRowScope.() -> Unit,
) =
    FlowRow(
        modifier,
        horizontalArrangement,
        verticalArrangement,
        itemVerticalAlignment,
        maxItemsInEachRow,
        maxLines,
        FlowRowOverflow.Clip,
        content,
    )

FlowRow is a layout that fills items from left to right (ltr) in LTR layouts or right to left (rtl) in RTL layouts and when it runs out of space, moves to the next "row" or "line" positioned on the bottom, and then continues filling items until the items run out.

When a Modifier RowScope.weight is provided, it scales the item based on the number items that fall on the row it was placed in.

Note that if two or more Text components are placed in a Row, normally they should be aligned by their first baselines. FlowRow as a general purpose container does not do it automatically so developers need to handle this manually. This is achieved by adding a RowScope.alignByBaseline modifier to every such Text component. By default this modifier aligns by androidx.compose.ui.layout.FirstBaseline. If, however, you need to align Texts by androidx.compose.ui.layout.LastBaseline for example, use a more general RowScope.alignBy modifier.

Parameters
modifier The modifier to be applied to the Row.
horizontalArrangement The horizontal arrangement of the layout's children.
verticalArrangement The vertical arrangement of the layout's virtual rows.
itemVerticalAlignment The cross axis/vertical alignment of an item in the column.
maxItemsInEachRow The maximum number of items per row
maxLines The max number of rows
content The content as a RowScope

Code Examples

SimpleFlowRow

@OptIn(ExperimentalLayoutApi::class)
@Composable
fun SimpleFlowRow() {
    Text(
        modifier =
            Modifier.fillMaxWidth(1f).padding(20.dp).wrapContentHeight(align = Alignment.Top),
        text = "Flow Row with weights",
        fontWeight = FontWeight.Bold,
    )
    FlowRow(
        Modifier.fillMaxWidth(1f).padding(20.dp).wrapContentHeight(align = Alignment.Top),
        horizontalArrangement = Arrangement.spacedBy(10.dp),
        verticalArrangement = Arrangement.spacedBy(20.dp),
        maxItemsInEachRow = 3,
    ) {
        repeat(20) {
            Box(
                Modifier.align(Alignment.CenterVertically)
                    .width(50.dp)
                    .height(50.dp)
                    .weight(1f, true)
                    .background(Color.Green)
            ) {
                Text(text = it.toString(), fontSize = 18.sp, modifier = Modifier.padding(3.dp))
            }
        }
    }
}