`weight` Modifier In Jetpack Compose

Photo by Siora Photography on Unsplash

In this medium article we will learn about weight Modifier in Jetpack Compose. Trust me this is very crucial topic that will make your life easy to create responsive apps 😄.

Let’s understand by the example

@Composable
fun WeightModifierDemo(
    modifier: Modifier = Modifier
) {

    Row(
        modifier = modifier
            .padding(20.dp)
            .fillMaxWidth()
    ) {
        Text(text = stringResource(R.string.weight_property), modifier = Modifier.weight(1F))
        Spacer(modifier = Modifier.width(10.dp))
        Box(
            modifier = Modifier
                .background(Color.Red, CircleShape)
                .size(50.dp)
        )
    }

}

As you will notice in the above code we have a Row and inside that a Text and Box composable functions.

Also we provided weight 1F to Text , if we doesn’t provide this weight property then the text content will not come to the next line it will overlapped to Box .

So here weight 1F means , it will take the whole width size till Box and Spacer composable function. If the Box will not there then it will by default take whole width.

Use weight property when your content size is too large and it should be in the next line instead of overlapped.