We just launched Compose Examples featuring over 150+ components! Check it out →

BoxWithConstraints

Common

Component in Compose Foundation Layout

Last updated:

Installation

dependencies {
   implementation("androidx.compose.foundation:foundation-layout:1.8.0-alpha04")
}

Overloads

@Composable
@UiComposable
fun BoxWithConstraints(
    modifier: Modifier = Modifier,
    contentAlignment: Alignment = Alignment.TopStart,
    propagateMinConstraints: Boolean = false,
    content: @Composable @UiComposable BoxWithConstraintsScope.() -> Unit
)

Parameters

namedescription
modifierModifier to be applied to the layout.
contentAlignmentThe default alignment inside the [BoxWithConstraints].
propagateMinConstraintsWhether the incoming min constraints should be passed to content.
contentThe content of the [BoxWithConstraints].

Code Example

BoxWithConstraintsSample

@Composable
fun BoxWithConstraintsSample() {
    BoxWithConstraints {
        val rectangleHeight = 100.dp
        if (maxHeight < rectangleHeight * 2) {
            Box(Modifier.size(50.dp, rectangleHeight).background(Color.Blue))
        } else {
            Column {
                Box(Modifier.size(50.dp, rectangleHeight).background(Color.Blue))
                Box(Modifier.size(50.dp, rectangleHeight).background(Color.Gray))
            }
        }
    }
}
by @alexstyl