by @alexstyl
✉️ Leave your feedback

← Back to Foundation Layout

FlowColumn

Component
in
Foundation Layout
. Since 0.1.0-dev15

Overview

Examples

Community Notes

@Composable
fun SimpleFlowColumn() {
    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))
            }
        }
    }
}
@Composable
fun SimpleFlowColumnWithWeights() {
    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)
            )
        }
    }
}
Previous ComponentConstraintLayout
Next ComponentFlowRow