FlowRow

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: 2024-10-14 12:17

Installation

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

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

name	description
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]

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