# FlowRow

Common/AllAndroid/JVM

## Functions summary

|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRow.composable#FlowRow(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Vertical,kotlin.Int,kotlin.Int,kotlin.Function1)( modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, horizontalArrangement: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement.Horizontal, verticalArrangement: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement.Vertical, itemVerticalAlignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Vertical, maxItemsInEachRow: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, maxLines: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRow.composable#FlowRow(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Vertical,kotlin.Int,kotlin.Int,kotlin.Function1)` 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. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable @https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ExperimentalLayoutApi [FlowRow](https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRow.composable#FlowRow(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Vertical,kotlin.Int,kotlin.Int,androidx.compose.foundation.layout.FlowRowOverflow,kotlin.Function1))( modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, horizontalArrangement: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement.Horizontal, verticalArrangement: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement.Vertical, itemVerticalAlignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Vertical, maxItemsInEachRow: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, maxLines: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, overflow: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRowOverflow, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` **This function is deprecated.** The overflow parameter has been deprecated | Cmn |

## Functions

### FlowRow

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/FlowLayout.kt+function:FlowRow) Added in [1.8.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.8.0)

```
@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
): Unit
```

`https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRow.composable#FlowRow(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Vertical,kotlin.Int,kotlin.Int,kotlin.Function1)` 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.

Example:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.FlowRow
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

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

When a Modifier `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope#(androidx.compose.ui.Modifier).weight(kotlin.Float,kotlin.Boolean)` 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 `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Row.composable#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)`, normally they should be aligned by their first baselines. `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRow.composable#FlowRow(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Vertical,kotlin.Int,kotlin.Int,kotlin.Function1)` as a general purpose container does not do it automatically so developers need to handle this manually. This is achieved by adding a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope#(androidx.compose.ui.Modifier).alignByBaseline()` modifier to every such Text component. By default this modifier aligns by `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#FirstBaseline()`. If, however, you need to align Texts by `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#LastBaseline()` for example, use a more general `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope#(androidx.compose.ui.Modifier).alignBy(androidx.compose.ui.layout.HorizontalAlignmentLine)` modifier.

| Parameters |
|---|---|
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | The modifier to be applied to the Row. |
| `horizontalArrangement: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement.Horizontal = Arrangement.Start` | The horizontal arrangement of the layout's children. |
| `verticalArrangement: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement.Vertical = Arrangement.Top` | The vertical arrangement of the layout's virtual rows. |
| `itemVerticalAlignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Vertical = Alignment.Top` | The cross axis/vertical alignment of an item in the column. |
| `maxItemsInEachRow: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html = Int.MAX_VALUE` | The maximum number of items per row |
| `maxLines: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html = Int.MAX_VALUE` | The max number of rows |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | The content as a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope` |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowColumn.composable#FlowColumn(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Horizontal,kotlin.Int,kotlin.Int,androidx.compose.foundation.layout.FlowColumnOverflow,kotlin.Function1)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Row.composable#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)` |   |

### FlowRow

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/FlowLayout.kt+function:FlowRow) Added in [1.8.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.8.0) Deprecated in [1.8.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.8.0)

```
@Composable
@ExperimentalLayoutApi
fun [FlowRow](https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRow.composable#FlowRow(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Vertical,kotlin.Int,kotlin.Int,androidx.compose.foundation.layout.FlowRowOverflow,kotlin.Function1))(
    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
): Unit
```

> [!CAUTION]
> **This function is deprecated.**   
> The overflow parameter has been deprecated

`https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRow.composable#FlowRow(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Vertical,kotlin.Int,kotlin.Int,androidx.compose.foundation.layout.FlowRowOverflow,kotlin.Function1)` 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.

Example:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.FlowRow
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

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

When a Modifier `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope#(androidx.compose.ui.Modifier).weight(kotlin.Float,kotlin.Boolean)` 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 `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Row.composable#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)`, normally they should be aligned by their first baselines. `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRow.composable#FlowRow(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Vertical,kotlin.Int,kotlin.Int,androidx.compose.foundation.layout.FlowRowOverflow,kotlin.Function1)` as a general purpose container does not do it automatically so developers need to handle this manually. This is achieved by adding a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope#(androidx.compose.ui.Modifier).alignByBaseline()` modifier to every such Text component. By default this modifier aligns by `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#FirstBaseline()`. If, however, you need to align Texts by `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#LastBaseline()` for example, use a more general `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope#(androidx.compose.ui.Modifier).alignBy(androidx.compose.ui.layout.HorizontalAlignmentLine)` modifier.

| Parameters |
|---|---|
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | The modifier to be applied to the Row. |
| `horizontalArrangement: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement.Horizontal = Arrangement.Start` | The horizontal arrangement of the layout's children. |
| `verticalArrangement: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement.Vertical = Arrangement.Top` | The vertical arrangement of the layout's virtual rows. |
| `itemVerticalAlignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Vertical = Alignment.Top` | The cross axis/vertical alignment of an item in the column. |
| `maxItemsInEachRow: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html = Int.MAX_VALUE` | The maximum number of items per row |
| `maxLines: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html = Int.MAX_VALUE` | The max number of rows |
| `overflow: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRowOverflow = FlowRowOverflow.Clip` | The strategy to handle overflowing items |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | The content as a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope` |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowColumn.composable#FlowColumn(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Horizontal,kotlin.Int,kotlin.Int,androidx.compose.foundation.layout.FlowColumnOverflow,kotlin.Function1)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Row.composable#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)` |   |