{% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %} {% include "_shared/_reference-head-tags.html" %}

FlowLayoutKt

public final class FlowLayoutKt


Summary

Public methods

static final void
@Composable
@ExperimentalLayoutApi
FlowColumn(
    @NonNull Modifier modifier,
    @NonNull Arrangement.Vertical verticalArrangement,
    @NonNull Arrangement.Horizontal horizontalArrangement,
    int maxItemsInEachColumn,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull FlowColumnScopeUnit> content
)

FlowColumn is a layout that fills items from top to bottom, and when it runs out of space on the bottom, moves to the next "column" or "line" on the right or left based on ltr or rtl layouts, and then continues filling items from top to bottom.

static final void
@Composable
@ExperimentalLayoutApi
FlowRow(
    @NonNull Modifier modifier,
    @NonNull Arrangement.Horizontal horizontalArrangement,
    @NonNull Arrangement.Vertical verticalArrangement,
    int maxItemsInEachRow,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull FlowRowScopeUnit> 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.

Public methods

FlowColumn

@Composable
@ExperimentalLayoutApi
public static final void FlowColumn(
    @NonNull Modifier modifier,
    @NonNull Arrangement.Vertical verticalArrangement,
    @NonNull Arrangement.Horizontal horizontalArrangement,
    int maxItemsInEachColumn,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull FlowColumnScopeUnit> content
)

FlowColumn is a layout that fills items from top to bottom, and when it runs out of space on the bottom, moves to the next "column" or "line" on the right or left based on ltr or rtl layouts, and then continues filling items from top to bottom.

It supports ltr in LTR layouts, by placing the first column to the left, and then moving to the right It supports rtl in RTL layouts, by placing the first column to the right, and then moving to the left

Example:

import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.FlowColumn
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.material.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

FlowColumn(
    Modifier
        .fillMaxWidth()
        .wrapContentHeight(align = Alignment.Top)
        .requiredHeight(200.dp)
        .border(BorderStroke(2.dp, Color.Gray)),
    horizontalArrangement = Arrangement.spacedBy(10.dp),
    verticalArrangement = Arrangement.Center,
    maxItemsInEachColumn = 3
) {
    repeat(10) { index ->
        Box(
            Modifier
                .align(Alignment.CenterHorizontally)
                .padding(top = 10.dp)
                .width(50.dp)
                .height(50.dp)
                .background(color = Color.Green)
        ) {
            Text(text = index.toString(), fontSize = 18.sp, modifier = Modifier.padding(3.dp))
        }
    }
}

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

Example:

import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.FlowColumn
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

FlowColumn(
    Modifier
        .fillMaxWidth()
        .wrapContentHeight(align = Alignment.Top)
        .requiredHeight(200.dp)
        .border(BorderStroke(2.dp, Color.Gray)),
    horizontalArrangement = Arrangement.spacedBy(10.dp),
    verticalArrangement = Arrangement.Center,
    maxItemsInEachColumn = 3
) {
    repeat(10) { index ->
        Box(
            Modifier
                .align(Alignment.CenterHorizontally)
                .padding(top = 10.dp)
                .width(50.dp)
                .height(50.dp)
                .weight(if (index % 2 == 0) 1f else 2f, fill = true)
                .background(color = Color.Green)
        )
    }
}
Parameters
@NonNull Modifier modifier

The modifier to be applied to the Row.

@NonNull Arrangement.Vertical verticalArrangement

The vertical arrangement of the layout's children.

@NonNull Arrangement.Horizontal horizontalArrangement

The horizontal arrangement of the layout's virtual columns

int maxItemsInEachColumn

The maximum number of items per column

@Composable @ExtensionFunctionType @NonNull Function1<@NonNull FlowColumnScopeUnit> content

The content as a ColumnScope

See also
FlowRow
Column

FlowRow

@Composable
@ExperimentalLayoutApi
public static final void FlowRow(
    @NonNull Modifier modifier,
    @NonNull Arrangement.Horizontal horizontalArrangement,
    @NonNull Arrangement.Vertical verticalArrangement,
    int maxItemsInEachRow,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull FlowRowScopeUnit> 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.

Example:

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.material.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

FlowRow(
    Modifier
        .fillMaxWidth(1f)
        .wrapContentHeight(align = Alignment.Top),
    horizontalArrangement = Arrangement.spacedBy(10.dp),
    verticalArrangement = Arrangement.spacedBy(20.dp),
    maxItemsInEachRow = 3
) {
    repeat(10) {
        Box(
            Modifier
                .align(Alignment.CenterVertically)
                .width(50.dp)
                .height(50.dp)
                .background(Color.Green)
        ) {
            Text(text = it.toString(), fontSize = 18.sp, modifier = Modifier.padding(3.dp))
        }
    }
}

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.

Example:

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.width
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

FlowRow(
    Modifier
        .wrapContentHeight()
        .fillMaxWidth(1f),
    horizontalArrangement = Arrangement.spacedBy(10.dp),
    verticalArrangement = Arrangement.spacedBy(20.dp),
    maxItemsInEachRow = 3
) {
    repeat(6) { index ->
        Box(
            Modifier
                .align(Alignment.CenterVertically)
                .width(50.dp)
                .height(50.dp)
                .background(Color.Green)
                .weight(if (index % 2 == 0) 1f else 2f, fill = true)
        )
    }
}
Parameters
@NonNull Modifier modifier

The modifier to be applied to the Row.

@NonNull Arrangement.Horizontal horizontalArrangement

The horizontal arrangement of the layout's children.

@NonNull Arrangement.Vertical verticalArrangement

The vertical arrangement of the layout's virtual rows.

int maxItemsInEachRow

The maximum number of items per row

@Composable @ExtensionFunctionType @NonNull Function1<@NonNull FlowRowScopeUnit> content

The content as a RowScope

See also
FlowColumn
Row