Compose Unstyled 2.0 is out! Check the official announcement blog ->
Function

FlexBoxConfig

Combine two FlexBoxConfig objects together.

FlexBoxConfigCombineSample

@OptIn(ExperimentalFlexBoxApi::class)
@Composable
fun FlexBoxConfigCombineSample() {
    // Define partial component layout tokens
    val BaseRow = FlexBoxConfig {
        direction(FlexDirection.Row)
        wrap(FlexWrap.Wrap)
    }
    val CenteredAlignment = FlexBoxConfig { alignItems(FlexAlignItems.Center) }
    val StandardGaps = FlexBoxConfig { gap(8.dp) }
    // Combine tokens together cleanly via factory functions or infix `then`
    val RowTokensCombined = FlexBoxConfig(BaseRow, CenteredAlignment, StandardGaps)
    // An empty call returns the default identity element gracefully without allocations
    val EmptyExtension = FlexBoxConfig()
    FlexBox(modifier = Modifier.fillMaxWidth(), config = RowTokensCombined then EmptyExtension) {
        repeat(4) { Box(Modifier.size(60.dp).background(Color.Magenta)) }
    }
}

Last updated: