You can use the Modifier.weight
Something like:

Row() {
    Column(
        Modifier.weight(1f).background(Blue)){
        Text(text = "Weight = 1", color = Color.White)
    }
    Column(
        Modifier.weight(2f).background(Yellow)
    ) {
        Text(text = "Weight = 2")
    }
}

enter image description here


Since "0.1.0-dev09" modifiers are moved on an interface, you can use

Modifier.weight(float, boolean)

to divide the vertical/horizontal space remaining after measuring unweighted child elements and distribute it according to this weight

 Column {
        Row(modifier = Modifier.weight(2.0f, true)) {
            Box (
                modifier = Modifier.fillMaxWidth().fillMaxHeight(),
                backgroundColor = Color.Red
            )
        }
        Row(modifier = Modifier.weight(1.0f, true)) {
            Box (
                modifier = Modifier.fillMaxWidth().fillMaxHeight(),
                backgroundColor = Color.Blue,
                gravity = ContentGravity.Center
            ) {
                Text(text = "A sample text")
            }
        }
        Row(modifier = Modifier.weight(2.0f, true)) {
            Box (
                modifier = Modifier.fillMaxWidth().fillMaxHeight(),
                backgroundColor = Color.Yellow
            )
        }
    }

The "0.1.0-dev04" release of Jetpack Compose contains changes, and FlexRow is deprecated. I can propose the following solution:

Row {
    Card(modifier = LayoutFlexible(1f), color = Color.Red) {
        Container(expanded = true, height = 50.dp) {

        }
    }
    Card(modifier = LayoutFlexible(2f), color = Color.Green) {
        Container(expanded = true, height = 50.dp) {

        }
    }
}

Result: enter image description here

The LayoutFlexible(flex = _f) helps us to solve the issue and Modifier can be applied to any container.


Use Modifier.weight(float) on the objects inside a container. You could also use constraintlayout or the Low Level Layout Composable. Check out the official compose layout codelab in compose pathways for more info on the same