FlexBoxConfig

@ExperimentalFlexBoxApi
fun interface FlexBoxConfig

Represents a configuration for a FlexBox container.

This configuration is defined via a lambda that operates on a FlexBoxConfigScope. Because this configuration block is executed during the layout phase rather than the composition phase, reading state variables inside the block will only trigger a layout pass, completely avoiding costly recompositions.

Configuration properties are applied sequentially. If a property is configured multiple times within the block, the final call takes precedence.

Reusability and Responsiveness

Configurations can be extracted, saved, and reused across multiple FlexBox containers:

Furthermore, because the FlexBoxConfigScope provides direct access to the incoming Constraints, you can easily create responsive configurations that dynamically adapt their direction, wrapping, or gaps based on the available screen space:

Functions

fun FlexBoxConfigScope.configure()

Applies the configuration to the given FlexBoxConfigScope. This method is invoked by the layout system during the measurement phase, not during composition.

Code Examples

FlexBoxConfigResponsiveSample

@OptIn(ExperimentalFlexBoxApi::class)
@Composable
fun FlexBoxConfigResponsiveSample() {
    val ResponsiveFlexBoxConfig = FlexBoxConfig {
        direction(FlexDirection.Row)
        wrap(if (constraints.maxWidth < 600.dp.roundToPx()) FlexWrap.Wrap else FlexWrap.NoWrap)
    }
    FlexBox(config = ResponsiveFlexBoxConfig) {
        repeat(4) { Box(Modifier.size(100.dp).background(Color.Blue)) }
    }
}

FlexBoxConfigReusableSample

@OptIn(ExperimentalFlexBoxApi::class)
@Composable
fun FlexBoxConfigReusableSample() {
    // Define reusable config - can be a top-level constant
    val RowWrapConfig = FlexBoxConfig {
        direction(FlexDirection.Row)
        wrap(FlexWrap.Wrap)
        gap(8.dp)
    }
    FlexBox(config = RowWrapConfig) {
        repeat(6) { Box(Modifier.size(80.dp).background(Color.Blue)) }
    }
}