This Compose book is reviewed by Googlers Check it out →

FlowRow

Common

Component in Compose Foundation Layout

[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.

Last updated:

Installation

dependencies {
   implementation("androidx.compose.foundation:foundation-layout:1.8.0-alpha04")
}

Overloads

@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
)

Parameters

namedescription
modifierThe modifier to be applied to the Row.
horizontalArrangementThe horizontal arrangement of the layout's children.
verticalArrangementThe vertical arrangement of the layout's virtual rows.
itemVerticalAlignmentThe cross axis/vertical alignment of an item in the column.
maxItemsInEachRowThe maximum number of items per row
maxLinesThe max number of rows
overflowThe strategy to handle overflowing items
contentThe content as a [RowScope]

Code Example

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))
            }
        }
    }
}
by @alexstyl